Question

我打算用一些颜色填充两条三线之间的空间。我尝试使用三个。从some angles below the model看起来不错，但是如果从上到下看，则网格区域会被部分阻塞（the image is here）。当Three.mesh被搞砸时，其他THREE.js对象（例如红点和红线）不受模型影响。以下是我的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,

  }));

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

Answer 1

在这种情况下，问题原来是.depthTest。由于进行了z缓冲（也称为depthTest），该对象正隐藏在地形几何体的后面。

在蓝色物体材质上禁用.deptTest，对其进行修复。

在材质上设置.transparent = true，在透明通道中第二次渲染标志。如果不设置它，绘制顺序可能正确，也可能不正确，问题仍然存在。

确保几何图形始终在顶部渲染的一种方法是，将几何图形放置在您要渲染的其他场景中。在地形场景之后渲染该场景，但这对于这种情况可能会显得过大。

Three.mesh被模型部分阻止

1 个答案: