关于前端:threejs控制3d模型透明度

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
    });
}