01
Reference image
A clean full-body avatar frame gives the model a readable silhouette: head, shoulders, elbows, hands, hips, knees, ankles and feet.
CHAPTER 10A · 3D VIBES
A mascot with motion.
Meshy, digital rigging and Three.js turn one brand avatar into a controllable web character.
Meshy · digital rigging · Three.js
A brand avatar with a skeleton inside.
We turned the Vibe robot from a still mark into a controllable 3D character — ready to idle, walk, run, dance and jump in a browser-based stage.
01
Still to model
02
Rigged for motion
03
Playable on the web
Live Three.js stage
IdlePresence loop
Loading motion rig.
Build note
From poster art to playable mascot.
02
Meshy model
The still becomes a textured GLB: the glossy white shell, black mechanics, gold trim and V visor are baked into a portable 3D asset.
03
Digital rigging
A hidden skeleton is fitted inside the robot so the mesh can bend, pose and inherit motion like a real game character.
04
Three.js stage
The web page becomes a small real-time showroom: lights, camera, timeline and controls running directly in the browser.
Reference frame
The clean standing pose.
Enough detail to keep the character recognisable. Enough restraint to make it riggable.
Playable · Gem Collector
Your mascot. Now playable.
Move the robot around the arena, collect all 8 gems, and trigger any animation on demand. WASD or arrow keys — Shift to run.
Gem Collector
Loading character…
Animations
What this unlocks
The brand stops being a logo. It becomes a performer.
This is the bridge between identity design and interactive media: a mascot that can live in explainers, launch films, product tours, games, social loops and real-time web experiences.