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

Question

我在 Three.js canvas 中插入了一个天空盒，如下所示：

// SkyBox
var urls = [
    themePath + 'assets/img/sky/pos-x.jpg',
    themePath + 'assets/img/sky/neg-x.jpg',
    themePath + 'assets/img/sky/pos-y.jpg',
    themePath + 'assets/img/sky/neg-y.jpg',
    themePath + 'assets/img/sky/pos-z.jpg',
    themePath + 'assets/img/sky/neg-z.jpg'
]
window.cubemap = THREE.ImageUtils.loadTextureCube(urls);
cubemap.format = THREE.RGBFormat;
window.shader = THREE.ShaderLib['cube']; 
shader.uniforms['tCube'].value = cubemap; 

window.skyBoxMaterial = new THREE.ShaderMaterial( {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
});

window.skybox = new THREE.Mesh(
    new THREE.BoxGeometry(1000, 1000, 1000),
    skyBoxMaterial
);

skybox.position.set(0, 200, 0);

scene.add(skybox);

我的问题是图片根本无法加载或完全无法加载，具体取决于浏览器。

在 Chrome 上，它们几乎总是被加载（有时一张脸没有被加载）。在 Firefox 上，它们几乎不会在第一次加载（我得到一个黑色背景）。我试图添加一个 settimer 来等待完成加载，但它没有改变任何东西。看来他们加载或未加载或部分加载，但无需等待。

我是不是做错了什么？图片有特定的格式吗？

Answer 1

其实很简单。 'loadTextureCube' 有回调函数。代码必须更改为：

var urls = [
    themePath + 'assets/img/sky/pos-x.jpg',
    themePath + 'assets/img/sky/neg-x.jpg',
    themePath + 'assets/img/sky/pos-y.jpg',
    themePath + 'assets/img/sky/neg-y.jpg',
    themePath + 'assets/img/sky/pos-z.jpg',
    themePath + 'assets/img/sky/neg-z.jpg'
]
window.cubemap = THREE.ImageUtils.loadTextureCube(urls, undefined, function() { 

    cubemap.format = THREE.RGBFormat;
    window.shader = THREE.ShaderLib['cube']; 
    shader.uniforms['tCube'].value = cubemap; 

    window.skyBoxMaterial = new THREE.ShaderMaterial( {
        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.BackSide
    });

    window.skybox = new THREE.Mesh(
        new THREE.BoxGeometry(1000, 1000, 1000),
        skyBoxMaterial
    );

    skybox.position.set(0, 200, 0);

    scene.add(skybox);

});

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

Three.js skybox not loading completely or at all

image

three.js

loading

skybox