为什么在 three.js 的某个角度下网格上的某些三角形看起来是透明的？

Question

首先我是three.js的新手。我正在制作一个 3D 拼图，需要创建多个由三角形组成的对象。问题是从某个角度看，这些三角形看起来是透明的： example 1, example 2。 Material 网格是这样创建的：

 var materials = [
        new THREE.MeshLambertMaterial( { opacity:0.6, color: 0x44ff44, transparent:false } ),
        new THREE.MeshBasicMaterial( { color: 0x44ff44, wireframe: true } )

    ];

这个 "bug" 有什么共同的原因吗？或者我应该更多地检查我的代码，因为它有问题？

Answer 1

每个面（三角形）都有一个可见的边和第二个不可见的边。要反转可见性，您可以更改 material 的属性 side - THREE.BackSide - 将显示背面而不是通常的一面。 THREE.DoubleSide - 将显示两者。 但是！真正的问题是缠绕顺序。三角形的可见边由您已将顶点添加到面的缠绕方向决定。这意味着不可见三角形的方向与您需要的三角形相反。例如（实际上非常原始）：

...
object.vertices.push(new THREE.Vector3(1,1,1)); // vertex index 0
object.vertices.push(new THREE.Vector3(2,2,2)); // vertex index 1
object.vertices.push(new THREE.Vector3(3,3,3)); // vertex index 2
object.faces.push( new THREE.Face3(0,1,2) );
...

要反转三角形的可见边，您需要将以下行更改为：

object.faces.push( new THREE.Face3(2,1,0) );

所以你只需要找到断开的三角形和颠倒顶点顺序即可。

为什么在 three.js 的某个角度下网格上的某些三角形看起来是透明的？

Why some triangles on the mesh appear to be transparent from certain angle with three.js?

mesh

transparent

three.js