threejs控制3d模型透明度

友人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.原创作者:👇👇👇
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
    });
}
阅读 3.2k
70 声望
8 粉丝
0 条评论
70 声望
8 粉丝
文章目录
宣传栏