Question

我使用下面的代码创建了一个天空盒。当天空盒立方体为1,000 x 1,000 x 1,000时，它会完美地显示出来。但是，当我将其扩展到10,000 x 10,000 x 10,000时，它只显示为黑色。我是否需要更改设置以支持更大的天空盒？

var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);

var directionalLight = new THREE.DirectionalLight(0xff8040);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// Add skybox
var directions  = ["miramar3.jpg", // right of me
"miramar1.jpg", // left of me
"miramar4.jpg", // above me
"miramar5.jpg", // beneath me
"miramar6.jpg", // behind me
"miramar2.jpg", // in front of me
];
var skyGeometry = new THREE.CubeGeometry( 1000, 1000, 1000 );    

var materialArray = [];
for (var i = 0; i < 6; i++)
    materialArray.push( new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture( directions[i] ),
        side: THREE.BackSide
    }));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
skyBox.position.y += 200;
scene.add( skyBox );

Answer 1

如果您创建一个名为

的新场景

var skyScene = new THREE.Scene();

你可以把你的盒子放进去，然后在你的主要内容之前渲染它。

你会设置

renderer.autoClear = false,

你的渲染循环会有类似

的东西

renderer.clear();
renderer.render( scene , camera );
renderer.render( skyScene , camera );

可能需要更多逻辑，但这是一般的想法。这样您就不必使用几何的其余部分来管理背景。不写深度的一种方法是坚持

depthWrite: false

在传递给材料的参数

中

Answer 2

这似乎是与相机剪辑有关的问题。剪切意味着摄像机远端平面后面的所有内容都不会渲染（=在场景中显示为黑色）。

three.js文档中的perspective camera使用近平面值1和远平面值1000：

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

因此，如果您像这样创建了相机并使用大小为10.000的天空盒，则立方体的每一边都太远（=在远处平面后面）并被剪裁。

Three.js skybox在小的时候工作但在大的时候是黑的

2 个答案: