最近有个项目,需要将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配置图
未经允许不得转载:前端撸码笔记 » threejs加载blender导出的动画json模型文件