Three.js模型隐藏或显示

Three.js模型隐藏或显示

你在使用Three.js开发项目的过程中,可能需要隐藏一个模型,或者一个模型处于隐藏状态,又希望让它显示出来,那么你可以继续阅读下去。

个人技术博客

材质属性 .visible

查看Three.js文档的基类 Material ,可以知道材质属性 .visible 的作用就是控制绑定该材质的模型对象是否可见,默认值是 trueLineBasicMaterialSpriteMaterialMeshBasicMaterial 等材质都会继承基类 Material 的可见性 .visible 属性,也就是说无论点模型 Points 、线模型 Line 或网格模型 Mesh 默认都是可见的。如果想隐藏一个模型可以设置该模型材质的 .visible 属性值为 true

// 隐藏网格模型mesh,visible的默认值是true
mesh.material.visible =false
// 使网格模型mesh处于显示状态
mesh.material.visible =true

隐藏一个层级模型

如果一个模型对象包含了多个网格模型 Mesh ,嵌套了很多层,形成了一个树结构,只有根部节点是网格模型 Mesh ,中间节点都是组对象 GroupObject3D对象 。如果你想通过控制材质的 .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 源码。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章