如何在three.js中使用遍歷來修改線框

Question

我有幾個對象，當選中它時，該復選框會將wireframe屬性更改為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(scene);

甚至

toggleWireFrame(myObject3D);

其中myObject3D是一個Object3D實例，它是要切換線框狀態的所有網格的父對象。

traverse()通過迭代起始對象的所有子代和孫代來工作。 您需要確保要切換到線框的所有對象都在該起始對象下為父對象，如上面的示例所示。

3）另一個選擇是使用數組存儲創建的每種材料，然后在用戶切換復選框時循環訪問此數組以更改線框屬性。

Answer 2

這就是我在項目中使用的，它只是將布爾值取反，因為它是對還是錯。

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

工作示例 （線框為x）