如何使用遍历三.js修改线框

how to use traverse in three.js to modify wireframe

本文关键字：修改 线框 js 何使用 遍历      更新时间：2023-09-26

我有几个对象，当它被选中时，复选框会将线框属性更改为真或假(运行时(。 

function toggleWireFrame(obj){
     var f = function(obj2)
     {
         if(obj2.hasOwnProperty("material")){
     obj2.material.wireframe=!obj2.material.wireframe;
     }          
  }
     obj.traverse(f);   
 }

1(如果你在每个网格上一个接一个地调用toggleWireFrame，你的代码应该可以工作。

toggleWireFrame(meshA);
toggleWireFrame(meshB);

如果每个网格都由多个网格组成，并且您还需要切换所有子网格，这将很有意义。例如，如果您从 OBJ 文件导入模型，您可能会获得这样的网格层次结构。

2(还是您只想调用toggleWireFrame一次并切换所有网格的线框？

如果是这种情况，您将不得不致电

toggleWireFrame(scene);

甚至

toggleWireFrame(myObject3D);

其中myObject3D是一个Object3D实例，它是要切换线框状态的所有网格的父级。

traverse()通过循环访问起始对象的所有子项和孙项来工作。您需要确保要切换到线框的所有对象都在此起始对象下具有父级，如上面的示例所示。

3( 另一种选择是使用数组在创建每个材料时存储它们，然后在用户切换复选框时遍历此数组以更改线框属性。

这是我在项目中使用的，它只是反转布尔值，因为它是真的或假的。

function wireframeToggle(i) {
    bool = i.material.wireframe;
    i.material.wireframe = !bool;
}

工作示例(x 表示线框(

相关文章：