Question

我在Three.js画布上创建了一个天空盒，如下所示：

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

我的问题是，任何＆＃39; div＆＃39; div我尝试在上面添加画布隐藏在天空盒后面，无论我给它什么z-index。如果我不添加天空盒，它们会出现。有谁知道为什么以及如何解决它？

Answer 1

我在HTML正文中的Three.js canvas标记之后添加div并且它有效。

Three.js：在带有skybox </div>的画布上显示<div>

1 个答案: