我在我的 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 上,它们几乎从未在第一次加载(我得到黑色背景)。我试图添加一个 settimer 来等待完整的加载,但它不会改变任何东西。似乎它们已加载或未加载或部分加载,但无需等待。
我做错什么了吗?图像是否有特定的格式?