Three.js场景背景不'；不出现

我正在尝试向webgl场景（Three.js）添加背景。该场景包含我使用DAZ3D和Photoshop创建的两个动画精灵表。我尝试了几乎所有的方法，但都没有效果，背景不是白色就是黑色。我在网上试过很多例子，要么我的精灵表动画师不工作，要么背景不出现。我读到我需要用两台摄像机拍两个场景，但这似乎不太管用

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

<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>

//标准全局变量
var容器、场景、摄影机、渲染器、控件、统计信息；
var keyboard=new THREEx.KeyboardState（）；
var clock=新的三个时钟（）；
//自定义全局变量
攻击、防御；
init（）；
制作动画（）；
//功能
函数init（）{
//场面
场景=新的三个。场景（）；
//摄像机
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=屏幕宽度/屏幕高度，近=0.1，远=1000；
var灯=新的三点灯（0xEEEE）；
var lightAmb=新的三个环境光（0x777777）；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
场景。添加（摄影机）；
摄像机位置设置（-10,30400）；
摄像机。注视（场景。位置）；
//渲染器
if（Detector.webgl）
renderer=new THREE.WebGLRenderer（{antialas:true}）；
其他的
renderer=new THREE.CanvasRenderer（）；
设置大小（屏幕宽度、屏幕高度）；
container=document.getElementById（'ThreeJS'）；
container.appendChild（renderer.domeElement）；
//事件
三倍。窗口大小调整（渲染器、相机）；
THREEx.FullScreen.bindKey（{charCode:'m'.charCodeAt（0）}）；
//灯光
光。位置。设置（20,0,20）；
场景。添加（灯光）；
场景。添加（lightAmb）；
//背景
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=假；
backgroundMesh.material.depthWrite=false；
var backgroundScene=new THREE.Scene（）；
var backgroundCamera=新的三个摄像头（）；
背景场景。添加（背景摄影机）；
backgroundScene.add（backgroundMesh）；
//地板
var floorTexture=new THREE.ImageUtils.loadTexture（'images/checkboard.jpg'）；
floorTexture.wrapps=floorTexture.wrapT=THREE.RepeatWrapping；
地板结构。重复。设置（10,10）；
var floorMaterial=新的三网格基本材质（{贴图：floorTexture，边：三。双面，光泽度：30}）；
var地板测量法=新的三平面几何（10001000）；
var地板=新的三层网格（地板测量、地板材料）；
楼层位置y=-0.5；
floor.rotation.x=Math.PI/2；
场景。添加（楼层）；
//具有动画纹理的网格！
var attackerTexture=new THREE.ImageUtils.loadTexture（'images/kitinalevel2.png'）；
攻击=新纹理动画（attackerTexture，2,13,26,25）；//纹理，水平，垂直，总持续时间。
var attackerMaterial=new THREE.MeshBasicMaterial（{map:attackerTexture，side:THREE.DoubleSide，transparent:true}）；
var Attackergometry=新的三个平面几何（50,50,1,1）；
var=新的三网格（attackerGeometry，attackerMaterial）；
攻击者位置设置（-5,20350）；
添加（攻击者）；
var defenderTexture=new THREE.ImageUtils.loadTexture（'images/kitinalevel1.png'）；
防御=新的纹理贴图（防御纹理，2,13,26,25）；//纹理，水平，垂直，总，持续时间。
var defenderMaterial=new THREE.MeshBasicMaterial（{map:defenderTexture，side:THREE.DoubleSide，transparent:true}）；
var defenderGeometry=新的三平面几何（50,50,1,1）；
var defenderx=新的三网格（defenderGeometry，defenderMaterial）；
卫士位置设置（25,20350）；
场景。添加（defenderx）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
更新（）；
}
函数更新（）{
var delta=clock.getDelta（）；
攻击更新（1000*delta）；
国防更新（1000*delta）；
//控件更新（）；
//stats.update（）；
}
函数render（）{
renderer.autoClear=false；
.clear（）；
渲染器。渲染（场景、摄影机）；
渲染器。渲染（背景场景、背景摄影机）；
}
函数TextureAnimator（纹理、tilesHoriz、TileVert、numTiles、TileDispuration）{
//注意：通过引用传递的纹理将由更新函数更新。
this.tilesHorizontal=tilesHoriz；
this.tilesVertical=tilesVert；
//此精灵表包含多少图像？
//通常等于tilesHoriz*tilesVert，但不一定，
//如果spritesheet底部有空白瓷砖。
this.numberOfTiles=numTiles；
texture.wrapps=texture.wrapT=THREE.RepeatWrapping；
纹理.repeat.set（1/this.tileSharizontal，1/this.tilesVertical）；
//每个图像应显示多长时间？
this.tileDisplayDuration=tileDisplayDuration；
//当前图像显示了多长时间？
此.currentDisplayTime=0；
//当前正在显示哪个图像？
此.currentTile=0；
this.update=函数（毫秒）{
此.currentDisplayTime+=毫秒；
while（this.currentDisplayTime>this.tileDisplayDuration）{
this.currentDisplayTime-=this.tileDisplayDuration；
这个.currentTile++；
if（this.currentTile==this.numberOfTiles）
此.currentTile=0；
var currentColumn=this.currentTile%this.tilesHorizontal；
texture.offset.x=currentColumn/this.tilesHorizontal；
var currentRow=数学地板（this.currentTile/this.TileSharizontal）；
texture.offset.y=currentRow/this.tilesVertical；
}
};
}        

我做错了什么

提前感谢。

找到了解决方案：

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

这将保持背景透明，然后用一点css我使背景出现

---

• [backbone.js]相关文章推荐

• Backbone.js 使用require.js和jasmine加载返回404的脚本 backbone.jsrequirejsjasmine
• backbone.js可以'；我不读藏书 backbone.js
• Backbone.js Trigger.io&；主干样板相对路径 backbone.js
• Backbone.js 主干中一个视图的模型和集合 backbone.jsviewcollectionsmodel
• Backbone.js 主干模型奇怪地缓存了自己 backbone.js
• Backbone.js 如何收听数组子模型'；s值变化 backbone.js
• Backbone.js 一个集合可以包含不同类的模型对象吗？ backbone.js
• Backbone.js 集合排序在主干上不起作用。使用restful服务的木偶 backbone.js
• Backbone.js 主干关系-如何通过两个外键找到相关模型？ backbone.js
• Backbone.js 如何在主干中检测jquery转义键事件？ backbone.js
• Backbone.js 无限卷轴上的主干提取集合 backbone.js
• Backbone.js 带下划线模板的主干视图如何避免在view.tag元素中包装模板 backbone.js
• Backbone.js BackboneJS，RequireJS如何包含.LESS backbone.jsrequirejsless
• Backbone.js 将多个函数绑定到一个视图'；s点击事件 backbone.js
• Backbone.js一条路由上的混合路由结果 backbone.jsasynchronous
• Backbone.js 需要模块的正确方式是什么 backbone.jsrequirejs
• Backbone.js Backbone.history.start（）发出错误 backbone.js
• Backbone.js“添加”和“同步”事件是冗余的 backbone.js
• Backbone.js 执行事件后无法刷新视图 backbone.js
• Backbone.js Backbone collection.reset函数返回数组 backbone.js

---

• 随机文章推荐