Blender Export Animation (Blender 导出动画 THREE.js)

我不是女神ヾ 2022-09-26 03:51 631阅读 0赞

# 从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][]  
[blender下载链接][blender 1]

### 然后 ###

你接着需要找到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文件。  
![blender插件管理][blender 2]

### 导出时选择THREE.js就好了 ###

## 下面说说导出FBX的细节 ##

### 1、容易出现这样的错误 ###

![动画变形][20160920153224116]  
可以看出，mesh变形，而骨架未变形。据说是为Blender的底层数据结构和autodesk不一样，和three.js又有些不一样，这么错错叠加，你都会感觉到很无奈。

### 2、这个问题的解决方案 ###

[github上的相关讨论][github]  
当时，我搜索了很多网站，试了很多方法，终于在github上的这个页面的解决方案还算有所收获  
![给恩人截个图][20160920153635326]  
这位恩人的方案，我使用后很成功的导出了动画，相当的开心。恩人是这么说的：

> 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，效果是可以运行的。**  
![对应的界面][20160920154458236]  
![解除绑定][20160920154531002]  
![导出设置][20160920154603902]

***但是，需要注意的是，Blender一次只能导出模型的一部分，如果你的模型有多个部分，那么呵呵呵……生无可恋脸。不过你可以通过导出多次，然后一个个导入到场景中去。希望这个问题能够在不远的将来得到解决***

### 3、其他问题 ###

Blender导出的动画并不是十分完美的，在maya下，一个点可以被很多骨骼影响，而在Blender中可能就有些问题了，最后，在three.js下，动画也会有些变形，如果动画的动作不大的话，可以忽略这个问题，我正在做的是想办法研究出maya exporter的bug如何解决，当我解决后会尽快和大家分享的，hhh

[blender]: /images/20220717/91050b78c19042168f6785b8b48e6a4d.png
[blender 1]: https://www.blender.org/download/
[blender 2]: /images/20220717/cb1534edda554eddae2522194e8b556f.png
[20160920153224116]: /images/20220717/ebadedbb350d49d289be1f57b2b46012.png
[github]: https://github.com/mrdoob/three.js/issues/6050
[20160920153635326]: /images/20220717/c8883836cc3f400397257b37554415db.png
[20160920154458236]: /images/20220717/f911bb5636d74067ac5b3e2373e51312.png
[20160920154531002]: /images/20220717/10169f3642b64376bc6b29b0267831ae.png
[20160920154603902]: /images/20220717/905329a7a8ae4113ac9e4fac86e6d5b1.png