threejs載入blender導出的動畫json模型文件

09-01

4 人贊了文章

最近有個項目，需要將Maya2015導出的fbx文件導入到threejs中。一開始以為很簡單，只要在maya導出fbx的時候將fbx的編碼設置成ascii就可以，但導入到threejs場景中的時候動畫亂掉了；

後來又想在maya中安裝threejs的插件（mrdoob/three.js，安裝方法鏈接里有），但是會報錯，也不知道是模型本身原因還是插件不兼容的，即使導出成功，也不能用。於是又想導出dae格式的，同樣也導不出來，即使導出來了threejs中也不能用。

一籌莫展之際，根據這篇文章（首個threejs項目-前端填坑指南 - At丶Sea - 博客園）了解到blender可以把模型導出為threejs支持的json或js格式，當然也需要在blender中安裝threejs對應的插件：mrdoob/three.js

這個版本是r69版本，一開始我不知道，下載的最新的版本，但是怎麼導出都失敗了。後來看到這篇文章（Three.js使用Blender導出json文件Uncaught TypeError問題，原因：新插件bug）後，才用的作者推薦的版本，然後根據這篇文章（Three.js 筆記 5：載入 3D 模型和骨骼動畫）給出的導出方法，最終導出了可用的js文件。

但是問題來了，模型能夠在threejs中渲染：

var loader = new THREE.JSONLoader();loader.load("model/untitled.js", function (geometry) {//導入模型 mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors, morphTargets: true })); mesh.scale.set(15, 15, 15); scene.add(mesh); });

但是動畫呢？該怎麼載入？我也找到了幾個threejs官網的demo（three.js webgl - morph targets - horse，skinning + morphing [knight]）來仿寫，但是失敗了，因為這兩個demo里的js模型結構跟blender導出的不一樣。於是有陷入死胡同中。

找了無數資料，皇天不負苦心人，後來翻牆，發現一個視頻：https://www.youtube.com/watch?v=TxKeR8DjJhI，則徹底解決了我的問題，他給出的是r72版本的threejs和r69版本的blender插件，blender版本暫且不知，但我繼續用的是2.74。

然後根據他的demo，換上我自己的json文件，則大功告成。

相關文件：

Three.js Release 72:

mrdoob/three.js

Three.js Release 69(Blender export addon):

mrdoob/three.js

Blender:

blender.org

Blender Model with Animation Test Example:

http://www.4shared.com/rar/N4IBqeXRce/THREEJS_Model_Animation.html（不太好下載，還需要註冊，等待廣告什麼的，於是我打包放到了百度網盤：http://pan.baidu.com/s/1dEI6oaH）

至此，問題算是解決了，但是想從根本上解決問題，我估計還有很長的路要走，因為有太多原理方面的問題沒有弄明白。但是管他的呢，每解決一個問題，我都覺得我牛逼到不行，怎麼描述呢，就好像頂風也能尿好幾丈遠，哈哈哈哈。

當然我這些辦法我沒有大範圍測試，也說不定只對我這一次的項目有效，還希望大神們多多指點，從根本上能夠解決這個導來導去的問題！

附一張blender導出json配置圖

本文首發於我的個人博客：threejs載入blender導出的動畫json模型文件-前端擼碼筆記