CubeTextureLoader 未在 Three.js 中加载天空盒

Question

我一生都无法弄清楚我在这里做错了什么。我正在尝试加载一个简单的天空盒，但什么也没得到。我尝试查找答案，但大多数使用

THREE.ImageUtils.loadTextureCube

，但此后已被弃用。我似乎找不到任何关于新

THREE.CubeTextureLoader

的例子。

注意：我将其与 Three.js youtube 加载器示例结合使用... http://trijs.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：

在 Three.js 中创建天空盒材质的方法比较

Three.js 天空盒未完全加载或根本未加载

Answer 1

正如 documentation 所指定的（也带有示例），应使用

envMap

属性创建材质，该属性应设置为您加载的

cubeTexture

。

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

使用

side

属性，以便从立方体内部看到材质。

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

skyBox.position.copy(camera.position);

Answer 2

我在工作时遇到了同样的问题并找到了解决方案。基本上，TextureLoader 代表屏幕宽度和高度，因此如果您使用 1920x1080，请尝试以下操作：

import sun from ’ ‘https://cdn.spacetelescope.org/archives/images/screen/heic1310a.jpg’';
const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load([sun, sun, sun, sun, sun, sun]);

或任何宽度为 1280px、高度也是 1280px 的图像。这会起作用的。