Three.js Skybox没有完全加载或根本没有加载 [英] Three.js skybox not loading completely or at all

问题描述

我在Three.js画布中插入了一个天窗，如下所示:

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.

在Chrome上，几乎总是加载它们(有时未加载一张脸).在Firefox上，它们几乎从来没有第一次加载(我的背景是黑色的).我试图添加一个settimer来等待完整的加载，但是它没有任何改变.似乎它们已加载或未加载或已部分加载，但无需等待.

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?

推荐答案

实际上非常容易. 'loadTextureCube'具有回调函数.代码必须更改为:

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

}); 

这篇关于Three.js Skybox没有完全加载或根本没有加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！