Export Scale Animation from Blender to Three.js

Hi, I want to export this simple animation from Blender to Three.js, using GLTF. But the rotation and position seems to be all wrong, and I not sure how to fix this. It’s scale animation type so I guess I can’t apply Scale to normalize the object. I attached my .glb and .blend file.

Three.js Editor:


about-animation.glb (13.1 KB)
threeeditor.mkv (1.4 MB)
blender.mkv (3.5 MB)
about-animation.blend (881.9 KB)

The position is correct, they are global coordinates, which is fine. But before exporting your model you need to apply rotations to all. If select your object, press N then you can see that your xyz have a bunch of angles. They need to be confirmed that this is their default position. To do that, go object - apply (or ctrl A) and rotation, this will make it the default 0 rotation. Also, its generally not advised to scale your models as animation. I would also apply the scale and just move the end vertices with armature.

1 Like

Thanks for the tips. I did try to Apply scale, position and rotation but with this setup, it would mess up everything. I have looks around and this is more of problem from Blender animation to GLTF, and I tried to play around with bake action, like here: export animation for gltf - Blender Stack Exchange, and it some what work!
I will give the armature method a try as well. Seems to be a better workflow.

Well, now that im looking back, you can fix the rotation issues other ways aswell. Simply add rotation keyframes to your objects at those 2 frames you have, that should fix it aswell, press I and select rotation. Or simply rotate the object in three js, with the values you see in blender, keep in mind y and z are flipped. You can animate with rotation and location, but I would avoid animating with scale.