我在 Three.js Canvas 上创建了一个天空盒,如下所示:
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);
我的问题是,无论我给它什么 z-index,我尝试在 Canvas 上方添加的任何“div”都隐藏在天空盒后面。如果我不添加天空盒,它们就会出现。有谁知道为什么以及如何解决它?
最佳答案
我在 HTML 正文中的 Three.js canvas 标记之后添加了 div,它起作用了。
关于html - Three.js:在带有天空盒的 Canvas 上显示 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28295352/