How can I create expressive animations for a custom 3D mascot in Three.js?
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.