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