threejs加载blender导出的动画json模型文件

最近有个项目,需要将Maya2015导出的fbx文件导入到threejs中。一开始以为很简单,只要在maya导出fbx的时候将fbx的编码设置成ascii就可以,但导入到threejs场景中的时候动画乱掉了;

后来又想在maya中安装threejs的插件(https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya,安装方法链接里有),但是会报错,也不知道是模型本身原因还是插件不兼容的,即使导出成功,也不能用。于是又想导出dae格式的,同样也导不出来,即使导出来了threejs中也不能用。

一筹莫展之际,根据这篇文章(http://www.cnblogs.com/pursues/p/5226807.html)了解到blender可以把模型导出为threejs支持的json或js格式,当然也需要在blender中安装threejs对应的插件:https://github.com/mrdoob/three.js/tree/r69/utils/exporters/blender

这个版本是r69版本,一开始我不知道,下载的最新的版本,但是怎么导出都失败了。后来看到这篇文章(http://blog.sina.com.cn/s/blog_4b1452dd0102wbjo.html)后,才用的作者推荐的版本,然后根据这篇文章(http://www.tuicool.com/articles/IbIVjyq)给出的导出方法,最终导出了可用的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(https://threejs.org/examples/webgl_morphtargets_horse.html,https://threejs.org/examples/webgl_animation_skinning_morph.html)来仿写,但是失败了,因为这两个demo里的js模型结构跟blender导出的不一样。于是有陷入死胡同中。

找了无数资料,皇天不负苦心人,后来翻墙,发现一个视频:https://www.youtube.com/watch?v=TxKeR8DjJhI,则彻底解决了我的问题,他给出的是r72版本的threejs和r69版本的blender插件,blender版本暂且不知,但我继续用的是2.74。

然后根据他的demo,换上我自己的json文件,则大功告成。

相关文件:

Three.js Release 72:
https://github.com/mrdoob/three.js/releases/tag/r72

Three.js Release 69(Blender export addon):
https://github.com/mrdoob/three.js/releases/tag/r69

Blender:
http://www.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配置图

v2-725e3fd64c5ca7936fc56413d9521de4_b.jpg

未经允许不得转载:前端撸码笔记 » threejs加载blender导出的动画json模型文件

上一篇:

下一篇: