一、解析外部模型的帧动画

1. 关键帧数据

• 打开模型文件model.json查看里面与帧动画有关的关键帧数据。

    "object": {
    // 绑定动画的模型名称Box
    "name": "Box",
    ...
    },
    // 动画数据
    "animations": [{
      "name": "default",
      "fps": 24,
      "tracks": [
        // 位置变化关键帧
        {
        "type": "vector3",
        "name": "Box.position",
        "keys": [{
          "value": [0, 0, 0],
          "time": 0
        }, {
          "value": [-100, 0, 0],
          "time": 50
        },...]
      },
      // 角度变化关键帧
      {
        "type": "quaternion",
        "name": "Box.quaternion",
        "keys": [{
          "value": [0, 0, 0, 0],
          "time": 0
        },...]
      },
      // 颜色变化关键帧
      {
        "type": "color",
        "name": "Box.material.color",
        "keys": [{
          "value": [1, 0, 0, 1],
          "time": 20
        }, ...]
      }]
    }]

2. 播放模型帧动画

// 通过ObjectLoader加载模型文件model.json
const loader = new THREE.ObjectLoader();
const mixer = null; //声明一个混合器变量
// 加载文件返回一个对象obj
loader.load("model.json", function(obj) {
  obj.scale.set(15, 15, 15);//缩放加载的模型
  scene.add(obj);
  // obj作为混合器的参数，可以播放obj包含的帧动画数据
  mixer = new THREE.AnimationMixer(obj);
  // obj.animations[0]：获得剪辑clip对象
  // // 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
  const AnimationAction = mixer.clipAction(obj.animations[0]);
  AnimationAction.play();
});

// 创建一个时钟对象Clock
const clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  if (mixer !== null) {
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    mixer.update(clock.getDelta());
  }
}
render();

3.播放设置

• 通过操作AnimationAction的相关属性设置播放效果。

  // 不循环播放(默认是循环播放)
  AnimationAction.loop = THREE.LoopOnce;

  //暂停在最后一帧播放的状态
  AnimationAction.clampWhenFinished = true;