Three.js模型隱藏或顯示

Three.js模型隱藏或顯示

你在使用Three.js開發項目的過程當中，可能須要隱藏一個模型，或者一個模型處於隱藏狀態，又但願讓它顯示出來，那麼你能夠繼續閱讀下去。

我的技術博客

材質屬性.visible

查看Three.js文檔的基類Material，能夠知道材質屬性.visible的做用就是控制綁定該材質的模型對象是否可見，默認值是true，LineBasicMaterial、SpriteMaterial、MeshBasicMaterial等材質都會繼承基類Material的可見性.visible屬性，也就是說不管點模型Points、線模型Line或網格模型Mesh默認都是可見的。若是想隱藏一個模型能夠設置該模型材質的.visible屬性值爲true。

// 隱藏網格模型mesh，visible的默認值是true
mesh.material.visible =false

// 使網格模型mesh處於顯示狀態
mesh.material.visible =true

隱藏一個層級模型

若是一個模型對象包含了多個網格模型Mesh，嵌套了不少層，造成了一個樹結構，只有根部節點是網格模型Mesh，中間節點都是組對象Group或Object3D對象。若是你想經過控制材質的.visible屬性批量隱藏該模型對象下的全部網格模型Mesh，首先須要作的就是要遞歸遍歷樹結構找到全部的網格模型Mesh，而後把全部網格模型Mesh材質的.visible屬性設置爲false。

經過對象的.traverse()方法遞歸遍歷一個模型，而後經過對象的類型屬性.type判斷該對象是否是網格模型對象Mesh，若是是的話執行obj.material.visible =false。

modelObject.traverse(function(obj) {
  if (obj.type === "Mesh") {
    obj.material.visible =false
  }
})

屬性.visible本質

若是你有興趣瞭解Three.js底層知識，能夠閱讀這段話，根據提示深刻研究，若是沒有興趣，能夠跳過，只要會使用.visible就能夠了。

Three.js的WebGL渲染器WebGLRenderer在渲染一個點Points、線Line、網格Mesh等模型對象的時候，會判斷它綁定材質的.visible屬性值，若是一個模型綁定材質的.visible屬性是false，該模型就不會被渲染，具體能夠閱讀src目錄下的WebGLRenderer.js源碼。