Three.js场景背景不会出现

Question

我试图在webgl场景中添加背景（Three.js）。该场景包含两个我使用DAZ3D和Photoshop创建的动画spritesheets。我尝试了几乎所有东西，但无济于事，背景是白色或黑色。我在网上尝试了很多例子，然后我的spritesheet动画师不会工作或背景不会出现。我读到我需要用两个相机制作两个场景，但这似乎也不行。

我真的不明白为什么我还需要有两个场景。

<script>
// standard global variables
var container,scene,camera,renderer,controls,stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var attack,defense;
init();
animate();
// FUNCTIONS         
function init(){
    // SCENE
    scene = new THREE.Scene();
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth,SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45,ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,NEAR = 0.1,FAR = 1000;
    var light = new THREE.PointLight(0xEEEEEE);
    var lightAmb = new THREE.AmbientLight(0x777777);
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
    scene.add(camera);
    camera.position.set(-10,30,400);
    camera.lookAt(scene.position);
    // RENDERER
    if (Detector.webgl)
        renderer = new THREE.WebGLRenderer({antialias:true});
    else
        renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);
    container = document.getElementById('ThreeJS');
    container.appendChild(renderer.domElement);
    // EVENTS
    THREEx.WindowResize(renderer,camera);
    THREEx.FullScreen.bindKey({charCode :'m'.charCodeAt(0)});
    // LIGHTS
    light.position.set(20,0,20);
    scene.add(light);
    scene.add(lightAmb);
    // BACKGROUND
    var texture = THREE.ImageUtils.loadTexture('images/sky.jpg');
    var backgroundMesh = new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),new THREE.MeshBasicMaterial({map:texture}));
    backgroundMesh.material.depthTest = false;
    backgroundMesh.material.depthWrite = false;
    var backgroundScene = new THREE.Scene();
    var backgroundCamera = new THREE.Camera();
    backgroundScene.add(backgroundCamera);
    backgroundScene.add(backgroundMesh);
    // FLOOR
    var floorTexture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(10,10);
    var floorMaterial = new THREE.MeshBasicMaterial({map:floorTexture,side:THREE.DoubleSide,shininess:30});
    var floorGeometry = new THREE.PlaneGeometry(1000,1000);
    var floor = new THREE.Mesh(floorGeometry,floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);
    // MESHES WITH ANIMATED TEXTURES!
    var attackerTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel2.png');
    attack = new TextureAnimator(attackerTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
    var attackerMaterial = new THREE.MeshBasicMaterial({map:attackerTexture,side:THREE.DoubleSide,transparent:true});
    var attackerGeometry = new THREE.PlaneGeometry(50,50,1,1);
    var attacker = new THREE.Mesh(attackerGeometry,attackerMaterial);
    attacker.position.set(-5,20,350);
    scene.add(attacker);
    var defenderTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel1.png');
    defense = new TextureAnimator(defenderTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
    var defenderMaterial = new THREE.MeshBasicMaterial({map:defenderTexture,side:THREE.DoubleSide,transparent:true});
    var defenderGeometry = new THREE.PlaneGeometry(50,50,1,1);
    var defenderx = new THREE.Mesh(defenderGeometry,defenderMaterial);
    defenderx.position.set(25,20,350);
    scene.add(defenderx);
}
function animate(){
    requestAnimationFrame(animate);
    render();        
    update();
}
function update(){
    var delta = clock.getDelta();
    attack.update(1000 * delta);
    defense.update(1000 * delta);
    //controls.update();
    //stats.update();
}
function render(){
    renderer.autoClear = false;
    renderer.clear();
    renderer.render(scene,camera);
    renderer.render(backgroundScene,backgroundCamera);
}
function TextureAnimator(texture,tilesHoriz,tilesVert,numTiles,tileDispDuration){
    // note:texture passed by reference,will be updated by the update function.
    this.tilesHorizontal = tilesHoriz;
    this.tilesVertical = tilesVert;
    // how many images does this spritesheet contain?
    //  usually equals tilesHoriz * tilesVert,but not necessarily,
    //  if there at blank tiles at the bottom of the spritesheet.
    this.numberOfTiles = numTiles;
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(1 / this.tilesHorizontal,1 / this.tilesVertical);
    // how long should each image be displayed?
    this.tileDisplayDuration = tileDispDuration;
    // how long has the current image been displayed?
    this.currentDisplayTime = 0;
    // which image is currently being displayed?
    this.currentTile = 0;
    this.update = function(milliSec){
        this.currentDisplayTime += milliSec;
        while(this.currentDisplayTime>this.tileDisplayDuration){
            this.currentDisplayTime-=this.tileDisplayDuration;
            this.currentTile++;
            if (this.currentTile == this.numberOfTiles)
                this.currentTile = 0;
            var currentColumn = this.currentTile%this.tilesHorizontal;
            texture.offset.x = currentColumn/this.tilesHorizontal;
            var currentRow = Math.floor(this.currentTile/this.tilesHorizontal);
            texture.offset.y = currentRow/this.tilesVertical;
        }
    };
}        
</script>

我做错了什么？

提前致谢。

Answer 1

找到解决方案：

renderer = new THREE.WebGLRenderer({antialias:true,alpha: true });

这样可以保持背景透明，然后用一点css我就会出现背景。