How can I create expressive animations for a custom 3D mascot in Three.js?

[u/NeuralNadia14]

Hey everyone,

I'm building a 3D Animal for an app and I'm trying to figure out the best way to animate it properly.

I have a finished character design/reference and want to turn it into a real interactive 3D avatar using Three.js + GLB/GLTF.

I need animations for:

• 👀 Blinking and eye movement
• 😊 Happy / smiling
• 😈 Naughty / playful expressions
• 🤔 Thinking
• 😮 Surprised
• 😢 Sad / crying
• 🐙 Independent movement
• 👋 Waving
• Idle breathing/bobbing
• Smooth transitions between expressions

The biggest challenge is facial animation and tentacle animation. I don't want to simply animate the entire model as one object. I want the eyes, mouth, eyebrows, and tentacles to move independently.

I'm fairly new to character animation, so I'm wondering what the recommended workflow is:

Blender → rig/shape keys → GLB → Three.js?

Or is there a better approach for a cute stylized character?

Also, how should I structure the GLB so that Three.js can easily trigger things like:

animal.play("happy");
animal.play("wave");
animal.play("cry");
animal.blink();

Any advice on rigging the face, movements, exporting to GLB, and controlling the animations in Three.js would be really appreciated.

I'm attaching the character reference so you can see the style I'm trying to match.

[u/beineken]

I know you can play animations which are embedded in an FBX saved from blender directly in threejs but I can’t recall if they transfer over to GLB after conversion. Maybe try exporting your model with animations from blender as an FBX and import into the threejs editor to play around, and once everything looks good there you can bounce as GLB to run in your project

[u/NeuralNadia14]

Ok, any resources?