从Blender导出动画到THREE.js
目前three.js使用是越来越多了,但资源问题还是有很多。比如怎么把动画导入到three.js。three.js是一个开源的平台,自己是不支持fbx动画文件的,即便 yamahigashi写了FBXLoader.js,该工具也有很多局限。
This is a very experimental script for my WebGL/Threejs exploration, please use under consideration. there are many missig features and issues.
他这么表述了,这个脚本只是他用来探索webgl的一个经验,还有很多问题和没有考虑到的细节。
所以我们把方向放在如何将fbx转换成THREE.js json文件
three.js在utils文件夹下放了好多导出工具,但多有局限。其中Blender Exporter工作效果还算不错。
但依旧有问题,因为Blender自己本身对FBX的支持就不够好。Blender是一个开源的免费的三维软件,非常小众,操作比较……额……用惯了maya的人表示难以接受。
步骤讲解
首先
你需要安装一个Blender或者是下载一个zip。我这里使用的是2.77版本
blender下载链接
然后
你接着需要找到three.js文件夹下的utils/exporters/blender文件夹,打开readme,按要求配置插件。
即,把utils/exporters/blender/addons文件夹中的io_three文件夹拷贝到blender安装目录下的相应位置我摘出了部分路径信息。
Windows
Should look like this:
C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons
OR (for 2.6)
C:\Users\USERNAME\AppData\Roaming\Blender Foundation\Blender\2.6X\scripts\addons
OSX
In your user’s library for user installed Blender addons:
/Users/(myuser)/Library/Application Support/Blender/2.7X/scripts/addons
Linux
By default, this should look like:
/home/USERNAME/.config/blender/2.6X/scripts/addons
For Ubuntu users who installed Blender 2.68 via apt-get, this is the location:
/usr/lib/blender/scripts/addons
之后,在blender界面中开启插件
在File->User Preferences下,选中Add-ons搜索three,把选择框勾选后,即可导出three.js json文件。
导出时选择THREE.js就好了
下面说说导出FBX的细节
1、容易出现这样的错误
可以看出,mesh变形,而骨架未变形。据说是为Blender的底层数据结构和autodesk不一样,和three.js又有些不一样,这么错错叠加,你都会感觉到很无奈。
2、这个问题的解决方案
github上的相关讨论
当时,我搜索了很多网站,试了很多方法,终于在github上的这个页面的解决方案还算有所收获
这位恩人的方案,我使用后很成功的导出了动画,相当的开心。恩人是这么说的:
I could only get this working when I kept the Armature modifier, but disabled both vertex groups and bone envelops (then re-enabled after export).
选中需要导出的单个模型部分,将modifiers下面的Vertex Group 和 Bone Envelopes 全部取消,然后导出json,效果是可以运行的。
但是,需要注意的是,Blender一次只能导出模型的一部分,如果你的模型有多个部分,那么呵呵呵……生无可恋脸。不过你可以通过导出多次,然后一个个导入到场景中去。希望这个问题能够在不远的将来得到解决
3、其他问题
Blender导出的动画并不是十分完美的,在maya下,一个点可以被很多骨骼影响,而在Blender中可能就有些问题了,最后,在three.js下,动画也会有些变形,如果动画的动作不大的话,可以忽略这个问题,我正在做的是想办法研究出maya exporter的bug如何解决,当我解决后会尽快和大家分享的,hhh