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源碼。

作者：郭隆邦技術部落格

來源：CSDN

原文：

https://blog.csdn.net/u014291990/article/details/91461711

版權聲明：本文為部落客原創文章，轉載請附上博文連結！