Dancing Rider — a character that dances to your beat
The Dancing Rider scene features a full 3D character — a Mixamo skeletal model exported as GLB — that analyzes your music in real time, detects its tempo, and launches the most fitting dance animation from 7 MoCap choreographies: Hip-Hop, Dancing, Northern Soul, Macarena, Salsa, Samba and Swing.
A 4-phase state machine
The character follows a complete narrative cycle. It first enters through an intro animation (Crouch-To-Stand), then waits patiently with a smooth idle animation. As soon as music is detected, it enters an analysis phase for a few seconds to measure the BPM and spectral profile of the track — bass-to-treble ratio — before launching the best-fitting dance. When the music stops, it gradually returns to its waiting pose.
Dance selection by BPM and spectrum
The selection algorithm cross-references the detected BPM with the bass/treble ratio of the track to score each dance style. A slow, bass-heavy song will naturally trigger Hip-Hop; a fast, light rhythm will favour Swing or Salsa. The animation playback speed is then continuously synchronized with the real tempo via progressive smoothing, keeping the character always on beat.
Smooth transitions and light shows
Transitions between animations use Three.js AnimationMixer's crossfade system, making switches imperceptible. Two spot lights orbit the character, shifting color across the sound spectrum and pulsing on beats. A 2,800-star sky surrounds the scene for a night show atmosphere.
Technology
Mixamo skeletal GLB model loaded via THREE.GLTFLoader. 7 Mixamo FBX MoCap clips retargeted (bone renaming, root motion removed). FBX→GLB Hips quaternion correction via q_correction = q_char × q0⁻¹. AnimationMixer + crossFadeTo() for all transitions (0.5–0.8 s). BPM: beat intervals (clock-units) smoothed over 24 measures. Dance selection: score = BPM overlap × spectrum overlap, argmax. timeScale smoothed via lerp (factor 0.06). 2 orbiting PointLights + reactive MeshBasicMaterial spheres. 2,800-point star sphere (3 PointsMaterial groups, AdditiveBlending).