CubeTextureLoader 没有在 three.js 中加载天空盒

Question

我一生都无法弄清楚我在这里做错了什么。我正在尝试加载一个简单的天空盒，但我什么也没得到。我试图查找答案，但大多数使用THREE.ImageUtils.loadTextureCube，此后已被弃用。我似乎在新的THREE.CubeTextureLoader 上找不到任何示例。

注意：我将它与 three.js youtube 加载器示例一起使用... http://threejs.org/examples/#css3d_youtube

var loader = new THREE.CubeTextureLoader();
textureArray = ['galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png'];
loader.setPath('./img/');
var textureCube = loader.load([
    'galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png'
]);

var skyMaterial = new THREE.MeshBasicMaterial({
    color: 0x444444,
    map: new THREE.TextureLoader(textureArray),
    opacity: 0,
    transparent: true
});

var skyGeometry = new THREE.BoxGeometry(2000, 2000, 2000);

var skyMesh = new THREE.Mesh(skyGeometry, skyMaterial);
scene.add(skyMesh);

我做错了什么？我没有收到任何错误（只是广告拦截器的错误）。 CubeTextureLoader 会不会出错？

所有这些帖子都使用 ImageUtils.loadTextureCube：

comparing methods of creating skybox material in three.js

Three.js skybox not loading completely or at all

Answer 1

正如documentation 指定的那样（也有一个示例），应该使用envMap 属性创建材质，该属性应该设置为您加载的cubeTexture。

var skyMaterial= new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    envMap: textureCube,
    side: THREE.BackSide
} );

side 属性用于从立方体内部看到材质。

另外，我认为没有必要让你的天空盒那么大。只需在每次渲染之前让它跟随您的相机位置即可。

skyBox.position.copy(camera.position);