ThreeJS-车展(二十九)

为了更好的兼容提供素材的解码器,建议使用[email protected]版本

npm install [email protected] -S

不然有可能会出现以下问题:

ThreeJS-车展(二十九)_第1张图片

素材:

链接: https://pan.baidu.com/s/1gqqOwEC-Iy4D_rCFGmLR9g

提取码: c6xj

关键代码:

loader.load("car.glb", (gltf) => {

      let textureLoader = new THREE.TextureLoader();

      textureLoader = textureLoader.load("three/050.jpg");

      //映射-折射映射,不设置将不会透明

      textureLoader.mapping = THREE.EquirectangularRefractionMapping;

      // gltf.scene.rotation.x= -Math.PI/2

      gltf.scene.traverse((child) => {

        if (child.isMesh) {

          if (child.name.includes("轮毂")) {

            child.material = this.wheelPhysicalMaterial;

            this.wheels.push(child);

          }

          if (child.name.includes("Mesh002")) {

            console.log(this.carBodyPhysicalMaterial);

            child.material = this.carBodyPhysicalMaterial;

            this.carBody = child;

          }

          if (child.name.includes("前脸")) {

            child.material = this.carFrontPhysicalMaterial;

            this.carFront = child;

          }

          if (child.name.includes("引擎盖_1")) {

            child.material = this.carHoodPhysicalMaterial;

            this.carHood = child;

          }

          if (child.name.includes("挡风玻璃")) {

            child.material = this.carGlassPhysicalMaterial;

            this.carGlass = child;

          }

        }

      });

      scene.add(gltf.scene);

    });

完整代码:

效果图:

 

 

你可能感兴趣的:(前端,javascript)