Question

首先，我是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 } )

    ];

这个＆＃34; bug＆＃34;是否有任何共同的原因？或者我应该更多地查看我的代码，因为它有问题吗？

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

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

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

1 个答案: