如何实现three.js加载GLTF模型后,让模型的一个部件旋转

80 阅读1分钟

9381fca0248efa17c588ec5c063a1fb.png 我想让这个轮盘转起来 但是效果并不好,他并没有围绕着中心点旋转。

image.png 哪里出了问题呀,我绘制了轮盘的盒子,发现他就只有矩形那么大啊

```loader.load(
        "/gltf/butterfly_valve/scene.gltf", // GLTF模型路径
        (gltf) => {
          console.log("gltf模型", gltf);
          gltf.scene.traverse((child) => {
            if (child.isMesh) {
              // 对每个网格对象进行操作
              if (child.name == "Object_7") {
                child.material.color.setHex(0xff0000); // 红色
                const clonedPart = child.clone();
                this.Object_7 = clonedPart;
                const box = new THREE.Box3().setFromObject(clonedPart);
                const size = new THREE.Vector3();
                box.getSize(size); // 获取包围盒的大小
                const center = box.getCenter(new THREE.Vector3()); // 获取包围盒的中心
                // 创建包围盒的几何体和材质
                const geometry = new THREE.BoxGeometry(size.x, size.y, size.z);
                const material = new THREE.MeshBasicMaterial({
                  color: 0xff0000,
                  transparent: true,
                  opacity: 0.5,
                }); // 半透明红色
                const boundingBoxMesh = new THREE.Mesh(geometry, material);
                // 将包围盒放置在部件的中心
                boundingBoxMesh.position.copy(center);
                //clonedPart.position.copy(center);
                //this.Object_7 = clonedPart;
                this.scene.add(clonedPart);
                this.scene.add(boundingBoxMesh);
              } else {
                const clonedPart = child.clone();
                //clonedPart.rotation.y = THREE.MathUtils.degToRad(180);
                //clonedPart.position.set(0.5, 0.5, 0.5);
                this.scene.add(clonedPart);
              }
            }
          });
          this.model = gltf.scene;
          if (gltf.animations && gltf.animations.length > 0) {
            this.animationMixer = new THREE.AnimationMixer(this.model);
            const action = this.animationMixer.clipAction(gltf.animations[0]);
            action.play();
          }
        },
        undefined,
        (error) => {
          console.error("An error happened while loading the model:", error);
        }
      );