为什么网格上的某些三角形使用three.js从某个角度看起来是透明的？答案

【问题标题】：Why some triangles on the mesh appear to be transparent from certain angle with three.js?为什么网格上的某些三角形使用three.js从某个角度看起来是透明的？
【发布时间】：2015-11-29 01:50:18
【问题描述】：

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

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

    ];

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

【问题讨论】：

面有侧面 - 正面和背面，默认情况下只有正面可见，您可以通过将侧面参数设置为其他值来更改材质，即new THREE.MeshBasicMaterial( { color: 0x44ff44, side: THREE.DoubleSide} )link to relevant documentation跨度>
谢谢德特Trdelnik！虽然您的回答解决了我的问题@kaigorodov 的回答给了我一些额外的信息。现在，如果您可以复制您的答案并将其发布在下面，我可以将其标记为正确。
很乐意提供帮助，只是检查 kaigorodov 我不太关心代表

标签： three.js transparent mesh

【解决方案1】：

每个面（三角形）都有一个可见的边和不可见的第二个边。要反转可见性，您可以更改材料的属性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) );

所以你只需要找到破碎的三角形并反转顶点顺序。

【讨论】：