我可以在 three.js 中隐藏网格的面吗？

Posted 2023-02-27

【中文标题】我可以在 three.js 中隐藏网格的面吗？

【英文标题】：Can I hide faces of a mesh in three.js?

【发布时间】：2012-06-17 00:37:54

【问题描述】：

我想让网格的某些部分在运行时不可见。我可以将这些部分设置为不可见/透明吗，例如通过改变单面的属性？网格本身只使用一种材料。

---

示例性插图作为编辑器理解这个问题：想象一个网格（这里有 20 个顶点的几何），其中四个顶点的每个四边形构建一个 Face4 .现在，应该使网格的某些部分不可见（这里有两个面不可见）。

【问题讨论】：

你的问题不是很清楚。您是否尝试将面孔的可见性设置为 false（使它们不可见）？

我以我理解的方式编辑了这个问题。特别是，因为我也有这个问题并且不想创建重复。

【参考方案1】：

您可以为每个面指定不同的材质。这是一个面共享材质，但有些面是透明的示例：

// geometry
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );

// materials
materials = [
    new THREE.MeshLambertMaterial(  color: 0xffff00, side: THREE.DoubleSide  ),
    new THREE.MeshBasicMaterial(  transparent: true, opacity: 0  )
];

// assign material to each face
for( var i = 0; i < geometry.faces.length; i++ ) 
    geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );

geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls

// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );

更新的 Fiddle 展示了一种在运行时更改材质的方法：http://jsfiddle.net/e0x88z7w/

编辑：MeshFaceMaterial 已被弃用。发布和小提琴更新。

three.js r.87

【讨论】：

但是如何在runtime更改这些面材？我在Fiddle 中添加了一个点击监听器，它应该使所有面孔再次变黄，但它不起作用。我在上面找到了related discussion。

备注： 让所有面孔再次变黄不符合问题的用例。我changed the code 将透明材料应用到点击时的每个面部，当然这也不起作用。

这个小提琴允许 runtime 改变。 jsfiddle.net/2FZU7/4。它基于您引用的“相关讨论”。也因为需要预先分配缓冲区，所以不能换更复杂的材质，所以在新的fiddle中，两种材质都是Lambert。