javascript - CubeTextureLoader无法在three.js中加载skybox

我一辈子都无法弄清楚我在这里做错了什么。我正在尝试加载一个简单的Skybox，却一无所获。我试图查找答案，但是大多数使用THREE.ImageUtils.loadTextureCube，但此后已弃用。我似乎在新的THREE.CubeTextureLoader上找不到任何示例。

注意：我将它与three.js youtube loader示例结合使用...
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

最佳答案

正如documentation所指定的（还有示例），应使用envMap属性创建材料，该属性应设置为加载的cubeTexture。

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

使用side属性，以便可以从多维数据集内部看到材质。

另外，我认为没有必要将您的天窗变大。只需在每次渲染之前使其跟随相机的位置即可。

skyBox.position.copy(camera.position);