Three.js скайбокс не загружается полностью или вообще

Question

я вставил скайбокс в моем three.js холсте, как это:

// 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 они почти никогда не загружаются в первый раз (я получаю черный фон). Я попытался добавить привязку, чтобы дождаться полной загрузки, но это ничего не меняет. Кажется, они загружены или нет или частично, но нет необходимости ждать.

Я сделал что-то не так? Есть ли определенный формат для изображений?

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

});