The process I used to create a skybox on a Three.js canvas is as follows:
var urls = [
'pos-x.jpg',
'neg-x.jpg',
'pos-y.jpg',
'neg-y.jpg',
'pos-z.jpg',
'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, 0, 0);
scene.add(skybox);
After setting up the skybox, I encountered an issue where any 'div' element I tried to add above the canvas was hidden behind the skybox regardless of the z-index I assigned. Interestingly, they showed up when the skybox was not added. Does anyone have insights into why this happens and how it can be resolved?