GLTFLoader: Keyframe Animations not the same as Blender

Questions
, ,
1

Hello. I am new to Three.js and Blender. I have animated an expression in Blender. When I import the animation using GLTFLoader, the animation exists and plays, but the pose is not identical. It seems that blending the morph targets is not the same, almost as if some targets are preventing others from working.

In Three.js, it seems that the keyframes that are not blending are:
Eyebrow.Inner.Down.Left
Lip.Top.Up
Lip.Botom.Down

I have uploaded the GLTF to https://gltf-viewer.donmccurdy.com/ and the animation there is also missing the blending of the keyframes so it seems to be an issue with the GLTF export process, or the Blender file has something that is not supported.

I have a keyframe animation in blender:UNADJUSTEDNONRAW_mini_6

When I use GLTFLoader I get the following animation in Three.js:UNADJUSTEDNONRAW_mini_7

Blender File:BoyAnimation.blend.zip (3.1 MB)

GLTF:boy.glb.zip (3.2 MB)

2

This model’s animation has too many active morph targets for most real-time engines, including threejs, which can only activate a certain number of morph targets at once. If you disable the “shape key normals” option when exporting from Blender you’ll reduce the problem, although I don’t know whether that will be enough to fully fix it.

2 Likes
3

Thank you very much for the reply. Much appreciated.

Based on your feedback, I have deleted the Morph targets and replaced them with a face rig. This had a major benefit in reducing the file size considerably.

Thanks again for helping me get on the right track!

1 Like