javascript - Three.js 天空盒在小的时候可以工作，但是在大的时候是黑色的

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

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

perspective camera在 Three.js 文档中，使用近平面值 1 和远平面值 1000:

varcamera = new THREE.PerspectiveCamera( 45, 宽度/高度, 1, 1000 );

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