立方体纹理加载器不加载天空盒在三个.js

CubeTextureLoader not loading skybox in three.js

本文关键字：加载 三个 js 纹理 天空 立方体      更新时间：2023-09-26

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

注意：我将其与三个.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：

比较三种天空盒材质的创建方法.js

三.js天空盒没有完全加载或根本没有加载

正如文档所指定的那样（也带有示例），应使用应设置为加载cubeTexture的 envMap 属性创建材质。 

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

使用 side 属性，以便从立方体内部看到材料。

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

skyBox.position.copy(camera.position);
相关文章：