Détails du projet
Starting point
Three.js Journey Challenges are monthly challenges from the Three.js Journey community, each participant exploring an imposed theme in real-time 3D - this one the twentieth, "Cozy place". The direction narrowed down to one specific place, framed like a photo before the first line of code: a 1970s living room with a conversation pit, built prop by prop around that fixed shot.
The challenge
Beyond the style exercise, this challenge was a chance to push further on three fronts: a real Blender-to-WebGL pipeline, lighting a full scene (emissive practicals, baked vs. real-time), and above all live audio analysis - making a 3D render react to music in a way that feels right, not just "flashing on loud".
Process & Decisions
The green velvet pit is the subject of the shot, built for two uses - hanging out around the turntable, or curling up solo on the cushions. A signature detail: a cat figurine sculpted by artist WENNA, modeled from photos of the real piece with her permission, credited in the project. The turntable isn't a prop: click it and it actually plays a track, and the whole room - rendered as a point cloud rather than solid surfaces - reveals itself as the mouse moves, like a flashlight sweeping through, before it starts reacting to the music itself.
Execution
React Three Fiber and Three.js (drei, postprocessing for bloom/vignette/grain, n8ao for ambient occlusion), Vite for the build. Assets are modeled/kitbashed in Blender then exported as optimized glb. Audio reactivity runs on the native Web Audio API (no external library): pitch detection by note class (12 chromatic notes), using each note's relative share of the total energy rather than an absolute threshold - tuned by listening to the track live across several passes so the reaction actually tracks the music instead of just lighting up on volume.
