Three.js加載外部模型骨骼動畫

加載外部模型骨骼動畫

上節課是通過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();