Model animation from blender deformed in three

Questions
, ,
1

Hello everyone!
I’m exporting a glb animated model from Blender to Three.js. The model is a gumball machine with a pretty simple animation where the handle rotates. The issue is that the handle gets deformed as it rotates and then returns to its normal state after completing the turn.

I’ll attach screen recordings from Blender and Three.js to show the problem.


Any ideas why this is happening?
Thank you in advance! :slight_smile:

2
  1. Does it look ok in gltf-viewer ?
  2. Make sure there are no modifiers applied to the handle or the model, as these generally do not export well.
  3. If possible, apply rotation & scale to the mesh.
  4. If possible, apply animation to the mesh itself, not to the container / Empty that contains the mesh.
1 Like
3

Thanks for the suggestions! I just checked all those things and it still looks deformed (it also looks deformed in the viewer).

4

If it looks broken in both a three.js-based viewer (like the one above) and a babylon.js-based viewer (like https://sandbox.babylonjs.com/) then it’s safe to assume the glTF file itself broken, and the issue has to do with export from Blender rather than your three.js application.

If you’re able to share the .blend, or you could try filing a bug at GitHub - KhronosGroup/glTF-Blender-IO: Blender glTF 2.0 importer and exporter. Some rigging setups, like “bendy bones”, are known not to work outside of Blender.

5

You were right! I hadn’t considered that, even though the lever was rotating on its own, it was parented to the gumball machine to move up and down. I unparented it and animated the position separately, and now it no longer deforms. Thank you very much!

6

I ended up fix it with mjurczyk advice. Still, thanks for the help! :slight_smile: