threejs控制3d模型透明度

Posted 2021-09-06 友人A

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.原创作者：