Maya 导出动画到THREE.js

摘要
本文主要针对THREE.js 提供的Maya 导出插件,提出插件存在的部分问题,并给出做出相应的解决方案。


关于使用软件版本问题的声明

Maya版本:Maya 2015
Three.js版本:r79
Exporter版本:r79

配置maya插件

Copy the scripts and plug-ins folders to the appropriate maya folder, where maya-version is your current version of Maya (eg. 2013-x64).

  • Windows: C:\Users\username\Documents\maya\maya-version
  • OSX: ~/Library/Preferences/Autodesk/maya/maya-version
  • Linux: /usr/autodesk/userconfig/maya/maya-version

After that, you need to activate the plugin. In Maya, open Windows > Settings/Preferences > Plug-in Manager and enable the checkboxes next to threeJsFileTranslator.py.
menu

plugin

使用方法

Use the regular Export menus within Maya, select Three.js.

出现的问题

原本想借助maya将fbx动画文件转化为Three.js JSON文件。方便在Three.js上使用动画,但导出的动画,背后总会背着一个模型,非常鬼畜,见下图:
动画后背着一个T-POSE
经过多次调试,发现网络上很多人有类似的问题,但他们并未给出很正确的解决方案。
http://stackoverflow.com/questions/30987319/how-to-export-an-animation-from-maya-to-three-js-workflow
上文给的解决方案是,化骨骼动画为morph动画,这与我们的目的不是很相符。

问题探索的过程

经过一系列痛苦的调试过程终于发现了问题所在,当插件将模型导出为three.js支持的格式时,便将点数加倍了。

点数加倍

为了寻找问题的解决方案,我把调试的重点放在了maya上,终于有了更多的些许进展。maya插件中采取了获得场景中所有mesh的方法。而当一个模型建立了骨架蒙皮后,maya会自动生成一个新的mesh,叫做”名字”+”Orig” 。个人推测”Orig”为Origin的缩写,故,maya可能用它来保存mesh原本的坐标,而用“名字”来代之随着骨架变动而改变的点的信息。可这样以此导出两个模型并不是我们想要的。

手动建模实验证明

建立一个简单的模型,不绑定骨架的话,属性列表中只存在一个mesh:

只有一个Mesh

如果为这个简单的模型建立骨架蒙皮,发现,一旦建立了蒙皮,便会多出一个”名字”+”Orig”的Mesh

两个mesh

即,导出场景时,场景中的蒙皮了的模型,点数会加倍,而没有骨骼蒙皮的模型点数则正常,我尝试着取消了蒙皮,发现这个点数加倍并不会取消,所以着很可能是一个不可逆的过程。

窥探maya插件

发现了maya的问题不代表我能解决这个问题,所以,我把关注点转到了我们的插件上,发现插件的原理比较简单:

首先扫描场景中的所有mesh
遍历这些mesh,对每个mesh执行这样的操作:导出点到一个数组,导出面到一个数组,导出UV……

所以,我的解决方案是,修改了生成所有mesh这个步骤。将其中名称结尾是”Orig”的mesh删除掉。这样不一定是最好的方案,但十分有效。

hhh

修改后的插件的下载地址,如果没有积分的话,请留下邮箱,我有空发给你

下载地址

使用时注意事项:

  1. 如果导出骨架蒙皮时,请务必勾选Bones的框。
  2. 如果建立蒙皮后,又解除了蒙皮,在maya中,Orig成分是不会消失的,即先点击模型看属性,如果你的大部分模型都有Orig mesh的话,请勾选 Bones
  3. 请避免自己主动将模型名称命名为以Orig结尾的模型,如果以此命名,则当勾选Bones 时,该模型不会被导出
  4. 据我观察,该插件将场景内的模型的所有模型合并为一个模型了,且导出全部与导出当前选择的功能并没有什么用(插件代码没有区分),所有请保证场景中只有你需要导出的模型。
  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 25
    评论
### 回答1: 使用three.js导入3D动画模型可以通过以下几个步骤完成: 1. 准备模型文件:首先需要准备一个包含有动画模型的文件。常见的模型文件格式包括.obj,.fbx,.dae等。可以使用3D建模软件(如Blender、3ds Max等)创建模型并导出为合适的格式。 2. 创建场景:使用three.js创建一个场景,用于显示导入的模型。创建一个渲染器,指定渲染目标(可以是画布或者HTML元素),并设置渲染器的尺寸和像素密度。 3. 导入模型:使用three.js的加载器来导入模型文件。three.js中提供了多种加载器,例如OBJLoader用于.obj格式,FBXLoader用于.fbx格式,ColladaLoader用于.dae格式等。选择合适的加载器并使用它来加载模型文件。 4. 添加动画:当模型文件加载完成后,可以将动画添加到场景中。如果模型文件中包含动画数据,可以使用three.js提供的动画系统来播放动画。根据模型文件的格式和结构,可以使用不同的方式来控制和处理动画。 5. 渲染场景:在动画播放之前,需要在每一帧更新场景和模型的状态,并调用渲染器的渲染方法来显示场景。可以使用requestAnimationFrame函数来创建一个循环,以便在每一帧更新场景状态并渲染。 通过以上步骤,就能够使用three.js导入3D动画模型,并在浏览器中展示和播放模型的动画效果。着重注意导入的模型文件格式和对应的加载器,同时根据模型文件的结构来控制和处理动画,以实现预期的效果。 ### 回答2: 要在Three.js中导入3D动画模型,我们可以按照以下步骤进行: 首先,我们需要准备一个3D动画模型的文件,通常使用的格式是Collada(.dae)、FBX(.fbx)或者glTF(.gltf/.glb)。这些格式可以由3D建模软件(如BlenderMaya导出。 接下来,我们需要在网页中引入Three.js库,可以通过CDN或者本地引入。在HTML文档的头部添加以下代码: ```html <script src="https://threejs.org/build/three.js"></script> ``` 然后,我们创建一个场景(Scene)对象,一个相机(Camera)对象和一个渲染器(Renderer)对象。 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 接着,我们使用Three.js提供的加载器(Loader)来加载3D模型文件。以Collada为例,我们可以使用ColladaLoader: ```javascript var loader = new THREE.ColladaLoader(); loader.load('model.dae', function (collada) { var model = collada.scene; // 对模型进行一些调整 model.scale.set(0.1, 0.1, 0.1); scene.add(model); }); ``` 最后,我们需要编写动画循环的逻辑,即在每一帧中更新场景和渲染。 ```javascript function animate() { requestAnimationFrame(animate); // 更新动画 renderer.render(scene, camera); } animate(); ``` 通过以上步骤,我们就可以在网页中成功导入并展示3D动画模型了。需要注意的是,具体的加载方式和调整可能因使用的3D模型文件格式而有所不同,但基本的原理是相似的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值