关于前端: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
    });
}