Blender animation getting distorted after importing into three.js

Question

I am working on a project trying to put animations into a scene using blender and three.js. After hours of messing around with blender and three js i was able to get the the model and animation imported into three js. I used this :https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender to export my blender project into a js file. Here is what my animation currently looks like:

http://gyazo.com/5c39d15fd16fa7251dbc527732c2f867

I have a feeling that i am messing up something when exporting to a js file. I am completely new to blender and three js and was hoping that someone else has ran into this problem before. Any help is appreciated.

Thanks in advance!

Try starting with something simpler such as importing a cube from blender into Three.js. From that you can check if the problem is something in your model, textures, lights, etc, or in the tool/process you are using to import it. — Vini.g.fer
Thank you, i went back and tried to animate a simple object and it seemed to work fine. Then i went back to my original and ended up rigging and animating it all over again. I believe it had something to do with me moving my object from the origin/scaling the object when creating the first animation. In addition, i followed this post: stackoverflow.com/a/18770716 and set the position of both my mesh and armature before exporting to a js file. I am still not completely sure what caused this problem. — Dan

Martin Eckleben Martin Eckleben · Accepted Answer · 2016-07-19T10:25:32

Using the option "apply modifiers" when exporting to JSON always causes distortions for me.

It is completely reproducable.
As soon as I tick it -> distortions.
Untick -> no distortions.

Hope this somehow helps somebody.

Blender animation getting distorted after importing into three.js

1 Answers