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

Я вставил скайбокс в свой холст 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);

Моя проблема в том, что изображения не загружаются вообще или полностью в зависимости от браузера.

В Хроме они почти всегда подгружаются (иногда не подгружается одна грань). В Firefox они почти никогда не загружаются с первого раза (у меня черный фон). Я пытался добавить сеттаймер для ожидания полной загрузки, но это ничего не меняет. Вроде загружены они или нет или частично, но ждать не надо.

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


image loading three.js skybox
person Minichua    schedule 14.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле очень легко. '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);

});
person Minichua    schedule 16.02.2015