Question

上节课是通过Threejs程序创建一个骨骼动画然后解析播放，本节课是加载解析一个外部的骨骼动画模型文件。

查看骨骼动画数据

在解析模型骨骼动画之前，先加载外部的三维模型，查看骨骼动画相关的数据，这样便于大家理解，关于加载外部模型文件的更多知识可以查看第14章。

// 通过加载器ObjectLoader加载./marine_anims_core.json模型文件
var loader = new THREE.ObjectLoader();
loader.load("./marine_anims_core.json", function(obj) {
  console.log(obj);//浏览器控制台查看加载返回的结果
  scene.add(obj); //添加到场景中
})

你可以在上面回调函数中分别插入下面代码进行测试。

//从返回对象获得骨骼网格模型
SkinnedMesh = obj.children[0];
// 查看骨头关节Bone
console.log(SkinnedMesh.skeleton.bones);

// 骨骼辅助显示
var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh);
scene.add(skeletonHelper);

// 遍历骨骼模型中的骨关节Bone，并获得世界坐标
SkinnedMesh.traverse(function(elem) {
  if (elem.type === 'Bone') {
    console.log(elem.getWorldPosition(new THREE.Vector3()));
  }
});

解析渲染骨骼动画

下面关于骨骼动画解析的代码如果不是很理解，可以回忆一下第11章关于帧动画的详解讲解。

var loader = new THREE.ObjectLoader(); //创建一个加载器
var mixer = null; //声明一个混合器变量
loader.load("./marine_anims_core.json", function(obj) {
  scene.add(obj); //添加到场景中
  //从返回对象获得骨骼网格模型
  var SkinnedMesh = obj.children[0];
  //骨骼网格模型作为参数创建一个混合器
  mixer = new THREE.AnimationMixer(SkinnedMesh);
  // 查看骨骼网格模型的帧动画数据
  // console.log(SkinnedMesh.geometry.animations)
  // 解析跑步状态对应剪辑对象clip中的关键帧数据
  var AnimationAction = mixer.clipAction(SkinnedMesh.geometry.animations[1]);
  // 解析步行状态对应剪辑对象clip中的关键帧数据
  // var AnimationAction = mixer.clipAction(SkinnedMesh.geometry.animations[3]);
  AnimationAction.play();
  // 骨骼辅助显示
  // var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh);
  // scene.add(skeletonHelper);
})

// 创建一个时钟对象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();