javascript - 如何在 Three.js 中使用 traverse 修改线框

Question

我有几个对象，当选择它时，复选框会将线框属性更改为 true 或 false(运行时)。

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

Answer 1

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

toggleWireFrame(meshA);
toggleWireFrame(meshB);

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

2) 或者您只想调用 toggleWireFrame 一次并切换所有网格体的线框？

如果是这种情况，您必须调用

toggleWireFrame(场景);

甚至

toggleWireFrame(myObject3D);

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

traverse() 的工作原理是迭代起始对象的所有子对象和孙对象。您需要确保要切换到线框的所有对象都在此起始对象下作为父对象，如上面的示例所示。

3) 另一种选择是使用数组来存储创建的每种 Material ，然后在用户切换复选框时迭代此数组以更改线框属性。