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);

CubeTextureLoader未在three.js

1 个答案: