Three.js模型隱藏或顯示
你在使用Three.js開發(fā)項(xiàng)目的過程中猾浦，可能需要隱藏一個(gè)模型蔓搞，或者一個(gè)模型處于隱藏狀態(tài)上岗，又希望讓它顯示出來，那么你可以繼續(xù)閱讀下去肢础。
材質(zhì)屬性.visible
查看Three.js文檔的基類Material还栓，可以知道材質(zhì)屬性.visible的作用就是控制綁定該材質(zhì)的模型對象是否可見，默認(rèn)值是true传轰，LineBasicMaterial剩盒、SpriteMaterial、MeshBasicMaterial等材質(zhì)都會(huì)繼承基類Material的可見性.visible屬性慨蛙，也就是說無論點(diǎn)模型Points辽聊、線模型Line或網(wǎng)格模型Mesh默認(rèn)都是可見的。如果想隱藏一個(gè)模型可以設(shè)置該模型材質(zhì)的.visible屬性值為true期贫。
// 隱藏網(wǎng)格模型mesh身隐，visible的默認(rèn)值是true
mesh.material.visible =false
// 使網(wǎng)格模型mesh處于顯示狀態(tài)
mesh.material.visible =true
隱藏一個(gè)層級(jí)模型
如果一個(gè)模型對象包含了多個(gè)網(wǎng)格模型Mesh，嵌套了很多層唯灵，形成了一個(gè)樹結(jié)構(gòu)贾铝，只有根部節(jié)點(diǎn)是網(wǎng)格模型Mesh，中間節(jié)點(diǎn)都是組對象Group或Object3D對象埠帕。如果你想通過控制材質(zhì)的.visible屬性批量隱藏該模型對象下的所有網(wǎng)格模型Mesh垢揩，首先需要做的就是要遞歸遍歷樹結(jié)構(gòu)找到所有的網(wǎng)格模型Mesh，然后把所有網(wǎng)格模型Mesh材質(zhì)的.visible屬性設(shè)置為false敛瓷。
通過對象的.traverse()方法遞歸遍歷一個(gè)模型叁巨，然后通過對象的類型屬性.type判斷該對象是不是網(wǎng)格模型對象Mesh，如果是的話執(zhí)行obj.material.visible =false呐籽。
modelObject.traverse(function(obj) {
if (obj.type === "Mesh") {
obj.material.visible =false
}
})
屬性.visible本質(zhì)
如果你有興趣了解Three.js底層知識(shí)锋勺，可以閱讀這段話，根據(jù)提示深入研究狡蝶，如果沒有興趣庶橱，可以跳過，只要會(huì)使用.visible就可以了贪惹。
Three.js的WebGL渲染器WebGLRenderer在渲染一個(gè)點(diǎn)Points苏章、線Line、網(wǎng)格Mesh等模型對象的時(shí)候奏瞬，會(huì)判斷它綁定材質(zhì)的.visible屬性值枫绅，如果一個(gè)模型綁定材質(zhì)的.visible屬性是false，該模型就不會(huì)被渲染硼端，具體可以閱讀src目錄下的WebGLRenderer.js源碼并淋。
