Vue+Three.js 入门六（控制模型动画）

核心知识点

  1、AnimationMixer(Object3D)：混合器播放的动画所属的对象。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。我们可以理解为模型的动画引擎，有了它我们就可以操作动画。

  2、AnimationClip(String,Number,Array)：动画编辑器，当我们导入的模型存在动画时，模型数据里面的animations，就存在数据列表，不过这个需要了解。

  3、.clipAction (AnimationClip, Object3D)：根对象参数可选，默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。模型播放哪一个动画由它来配置。配置好之后，返回一个AnimationAction，之后执行.play()方法即可完成模型动画播放。

示例代码

  导入动画模型 -> 调整模型大小和偏移量 -> 给模型赋予动画 -> 播放动画

        let loader = new GLTFLoader();

        loader.load('./objs/factory2/RobotExpressive.glb', (gltf) => {

          let model = gltf.scene;

          model.scale.set(20, 20, 20);

          model.rotation.y = Math.PI;

          this.mixer = new THREE.AnimationMixer(model);

          let action = this.mixer.clipAction(gltf.animations[10]);

          action.play();

          this.robotModel = model;

          this.scene.add(model);

          // this.LOG.info(['gltf.animations -- ', gltf.animations]);

          this.render();

        });

  通过代码的‘gltf.animations’可以看出，模型的动画数据存在这个数组里面，所以我们想要操作模型改变模型动画时，根据animations里的数据即可完成动画的切换，具体实施，灵活运用。需要注意的是，上面的只是完成第一步，还有一步不过比较通用

      animate() {

        if (this.controls) {

          this.controls.update();

        }

        this.render();

        requestAnimationFrame(this.animate);

        if (this.mixer) {

          let dt = this.clock.getDelta();

          this.mixer.update(dt);

        }

      },