Three.js模型隐藏或显示
查看Three.js文档的基类Material,可以知道材质属性.visible的作用就是控制绑定该材质的模型对象是否可见,默认值是true,LineBasicMaterial、SpriteMaterial、MeshBasicMaterial等材质都会继承基类Material的可见性.visible属性,也就是说无论点模型Points、线模型Line或网格模型Mesh默认都是可见的。如果想隐藏一个模型可以设置该模型材质的.visible属性值为true。
// 隐藏网格模型mesh,visible的默认值是true
mesh.material.visible =false
1
2
// 使网格模型mesh处于显示状态
mesh.material.visible =true
1
2
隐藏一个层级模型
如果一个模型对象包含了多个网格模型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
}
})
1
2
3
4
5
属性.visible本质
如果你有兴趣了解Three.js底层知识,可以阅读这段话,根据提示深入研究,如果没有兴趣,可以跳过,只要会使用.visible就可以了。
Three.js的WebGL渲染器WebGLRenderer在渲染一个点Points、线Line、网格Mesh等模型对象的时候,会判断它绑定材质的.visible属性值,如果一个模型绑定材质的.visible属性是false,该模型就不会被渲染,具体可以阅读src目录下的WebGLRenderer.js源码。
---------------------
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!