通過Threejs先加載一個.FBX格式的三維模型文件，然后解析該文件中的骨骼動畫信息。?

加載器FBXLoader.js

<!-- 引入fbx模型加載庫FBXLoader -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script>
<!-- 輔助文件 -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>

加載fbx模型文件

加載模型文件，加載完成后，如果模型顯示位置不符合要求，可以通過Threejs程序進行平移、縮放等操作。

var loader = new THREE.FBXLoader();//創(chuàng)建一個FBX加載器
loader.load("SambaDancing.fbx", function(obj) {
  console.log(obj);//查看加載后返回的模型對象
  scene.add(obj)
  // 適當平移fbx模型位置
  obj.translateY(-80);
})

查看FBX模型幀動畫數(shù)據(jù)

stl、obj都是靜態(tài)模型，不可以包含動畫，fbx除了包含幾何、材質(zhì)信息，可以存儲骨骼動畫等數(shù)據(jù)。

解析之前可以先在瀏覽器控制臺查看動畫相關的數(shù)據(jù)是如何存儲的?？梢钥吹?code>obj.animations屬性的數(shù)組包含兩個剪輯對象AnimationClip，obj.animations[0]對應剪輯對象AnimationClip包含多組關鍵幀KeyframeTrack數(shù)據(jù)，obj.animations[1]對應的剪輯對象AnimationClip沒有關鍵幀數(shù)據(jù)，也就是說沒有關鍵幀動畫。具體的開發(fā)中，可能提供的模型有很多包含關鍵幀動畫的剪輯對象AnimationClip，可以根據(jù)自己的需要解析某個剪輯對象AnimationClip對應的動畫。

執(zhí)行第一個

解析fbx模型骨骼動畫?

var mixer=null;//聲明一個混合器變量
var loader = new THREE.FBXLoader();//創(chuàng)建一個FBX加載器
loader.load("SambaDancing.fbx", function(obj) {
  // console.log(obj)
  scene.add(obj)
  obj.translateY(-80);
  // obj作為參數(shù)創(chuàng)建一個混合器，解析播放obj及其子對象包含的動畫數(shù)據(jù)
  mixer = new THREE.AnimationMixer(obj);
  // 查看動畫數(shù)據(jù)
  console.log(obj.animations)
  // obj.animations[0]：獲得剪輯對象clip
  var AnimationAction=mixer.clipAction(obj.animations[0]);
  // AnimationAction.timeScale = 1; //默認1，可以調(diào)節(jié)播放速度
  // AnimationAction.loop = THREE.LoopOnce; //不循環(huán)播放
  // AnimationAction.clampWhenFinished=true;//暫停在最后一幀播放的狀態(tài)
  AnimationAction.play();//播放動畫
})

?需要注意，在渲染函數(shù)中需要更新混合器mixer相關的時間，不然動畫不會生效文章來源地址http://www.zghlxwxcb.cn/news/detail-467153.html

var clock = new THREE.Clock();
// 渲染函數(shù)
function render() {
  renderer.render(scene, camera); 
  requestAnimationFrame(render);

  if (mixer !== null) {
    //clock.getDelta()方法獲得兩幀的時間間隔
    // 更新混合器相關的時間
    mixer.update(clock.getDelta());
  }
}
render();

到了這里，關于Three.js加載FBX模型并解析骨骼動畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！