three.js对模型进行透明操作以及模型进度条

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/libs/draco/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
const url ='xxxx.glb';

loader.load(url, (gltf) => {
	let model = gltf.scene;
    gltf.scene.traverse((obj) => {
      if (obj.isMesh) { //判断是否是网格模型
          // 批量设置所有Mesh都可以产生阴影和接收阴影
          obj.castShadow = true;
          obj.receiveShadow = true;
      }
    })
    model.children.forEach(element => {
      if(element.type == "Mesh"){	//根据类型进行操作
        element.material.transparent = true;
        element.material.opacity = 0;
      }
      if(element.type == "Object3D"&&element.name == "Group_qt"){	//根据不同的条件进行操作
        element.children.forEach(elements => {
          if(elements.name == 'WK_Door_v03_p002'||elements.name == 'WK_Glass_v01_p012'||elements.name == 'WK_Glass_v01_p001'){
            elements.material.transparent = true;
            elements.material.opacity = 0.6;
          }
        })
      }
    });
    scene.add(gltf.scene);
    percentBool.value = false  //模型加载进度条
},
(xhr) => {
  percent.value = Math.floor((xhr.loaded / xhr.total) * 100);  //控制模型加载进度条
},
);