Three.js解析外部模型的帧动画

解析外部模型的帧动画

本文是Three.js电子书的11.2节

本节课通过一个案例来展示Threejs如何加载并播放外部模型中的帧动画数据。

关键帧数据

如果有兴趣，你可以打开模型文件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
    }, ...]
  }]
}]

播放模型帧动画

// 通过ObjectLoader加载模型文件model.json
var loader = new THREE.ObjectLoader();
var 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
  var AnimationAction = mixer.clipAction(obj.animations[0]);
  AnimationAction.play();
});

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

  if(mixer!==null){
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    mixer.update(clock.getDelta());
  }
}
render();

播放设置

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

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

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