threejs的api没找到控制模型显隐的方案,于是有了下面的民间方法:
1.首先加载模型的时候给需要显隐材质加上一个特殊属性(name='dikuai'),我这里是所有的mesh放在一个group里面方便做整体控制
const loader = new GLTFLoader()
loader.load(
'/glb/aaa.glb',
gltf => {
this.models = gltf.scene
this.scene.add(this.models)
gltf.scene.traverse((child) => {
if (child.isGroup) {
child.name = 'dikuai'
this.groups.push(child);
}
});
},
undefined,
undefined
)
2.控制显隐的方法,找到name等于dikuai的材质,然后让他们的透明度设置为0或者1。
show(){
let a = this.groups.find( item => item.name=='dikuai')
a.children.forEach(element => {
element.material.transparent = true
element.material.opacity = 1
});
},
hide(){
let a = this.groups.find( item => item.name=='dikuai')
a.children.forEach(element => {
element.material.transparent = true
element.material.opacity = 0
});
},
3.原创作者:👇👇👇
https://segmentfault.com/u/yo...
4.重点!!!:由于有些材质的透明度初始不同,最后效果就会呈现出所有材质的透明度不是同时到达0或者1,所有如果要做渐显渐隐的时候需要同时设置为某个值而不是减去或加上一个值👇
//错误的方法
let a = this.groups.find( item => item.name=='dikuai')
a.children.forEach(element => {
element.material.transparent = true
element.material.opacity +=0.01
});
//正确的方法
let newopacity = 循环改变的值
hide(newopacity)
function hide(val){
let a = this.groups.find( item => item.name=='dikuai')
a.children.forEach(element => {
element.material.transparent = true
element.material.opacity = val
});
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。