Three.mesh 被模型部分遮挡答案

【问题标题】：Three.mesh got partially blocked by modelThree.mesh 被模型部分遮挡
【发布时间】：2018-08-31 09:58:18
【问题描述】：

我打算用一些颜色填充两个 THREE.Lines 之间的空间。我尝试使用三个。从some angles below the model 看起来很好，但如果从上到下看，网格区域被部分阻塞（the image is here）。其他 THREE.js 对象，例如红点和红线不受模型影响，而 Three.mesh 被搞砸了。以下是我的 Three.mesh 代码：

  // push vertices 
  geom.vertices.push((new THREE.Vector3()).fromArray(borepoint));
  // add faces to mesh
  for(let i =0; i < geom.vertices.length-2; i++){
    for(let j = i + 1; j < geom.vertices.length-1; j++){
      for(let k = j + 1; k < geom.vertices.length;k++){
        geom.faces.push(new THREE.Face3(i,j,k));
      }
    }        
  }
  const fillMesh = new THREE.Mesh(geom , new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    color: 0x2f92d7,
    transparent: false,
    opacity: 0.5,

  }));

有人对此有任何想法吗？谢谢！

【问题讨论】：

可以在材质中试试 depthTest:false, transparent:true, opacity:1 吗？
depthTest: false 解决了这个问题。非常感谢！你能把它作为答案吗？这样我就可以关闭这个问题了

标签： three.js

【解决方案1】：

在这种情况下，问题原来是 .depthTest。由于 z 缓冲（又名 depthTest），对象被隐藏在地形几何体后面。

在蓝色物体材质上禁用 .deptTest，修复它。

在材质上设置 .transparent = true，在透明度通道中设置第二个要渲染的标志。如果没有设置，绘图顺序可能正确也可能不正确，问题仍然存在。

确保它始终在顶部渲染的一种方法是将几何体放在不同的场景中，在地形场景之后渲染器渲染，但这对于这种场景来说可能是多余的。

【讨论】：