Three.js 3D Audio Visualizer

What this builds

A Three.js scene where 3D geometry responds in real time to audio frequency data. The system analyzes audio through the Web Audio API's AnalyserNode, extracts frequency bands (sub-bass, bass, mids, highs), and maps them to visual parameters: mesh displacement, material emissive intensity, particle velocity, camera shake, and post-processing bloom strength. The result is a fully interactive 3D environment that feels alive with sound.

• Web Audio API pipeline: source -> AnalyserNode -> FFT data extraction per frame.
• Logarithmic frequency band grouping (sub-bass, bass, low-mid, mid, high-mid, high, presence, brilliance).
• Beat detection via energy threshold on bass band, triggering discrete visual events.
• 3D geometry driven by frequency data: radial frequency bars, sphere displacement, particle field modulation.
• Material emissive intensity linked to bass energy for pulsing glow.
• Optional camera shake on beat hits.
• Post-processing bloom that intensifies with overall audio energy.
• Autoplay policy compliance: no audio until user gesture. Static scene shown until play.
• Full dispose lifecycle including AudioContext cleanup.