一、加载外部模型骨骼动画

1. 查看骨骼动画数据

• 在解析模型骨骼动画之前，先加载外部的三维模型，查看骨骼动画相关的数据

    // 通过加载器ObjectLoader加载./marine_anims_core.json模型文件
    const 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);

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

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

2. 解析渲染骨骼动画

const loader = new THREE.ObjectLoader(); //创建一个加载器
const mixer = null; //声明一个混合器变量
loader.load("./marine_anims_core.json", function(obj) {
  scene.add(obj); //添加到场景中
  //从返回对象获得骨骼网格模型
  const SkinnedMesh = obj.children[0];
  //骨骼网格模型作为参数创建一个混合器
  mixer = new THREE.AnimationMixer(SkinnedMesh);
  // 查看骨骼网格模型的帧动画数据
  // console.log(SkinnedMesh.geometry.animations)
  // 解析跑步状态对应剪辑对象clip中的关键帧数据
  const 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
const clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  if (mixer !== null) {
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    mixer.update(clock.getDelta());
  }
}
render();