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
源码。
原文地址 blog.csdn.net
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!