Three.js skybox not loading completely or at all

问题

I inserted a skybox in my Three.js canvas like this:

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

My problem is that the images do not load at all or completely depending on the browser.

On Chrome, they are nearly always loaded (sometimes one face is not loaded). On Firefox, they are nearly never loaded the first time (I get a black background). I tried to add a settimer to wait for a complete load but it does not change anything. It seems they are loaded or not or partially, but there is no need to wait.

Did I do something wrong? Is there a specific format to have for the images?

回答1:

Very easy in fact. 'loadTextureCube' has a callback function. The code has to be change to :

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

});

来源：https://stackoverflow.com/questions/28519547/three-js-skybox-not-loading-completely-or-at-all

标签

image

three.js

skybox