AUDIO DRIVEN
SPHERE PARTICLES

How It Works

Each sphere has a unique bounce speed, height, and phase offset. The Three.js AudioAnalyser reads the frequency data every frame. The average frequency drives the bounce amplitude � louder music means higher bounces.

Setting Up the Scene

The scene uses a THREE.Scene() with fog for depth, a PerspectiveCamera positioned above and angled down at the grid, and a WebGLRenderer with antialiasing and shadow support enabled.

Lighting includes an ambient light for base illumination, a directional light casting shadows from above, and a point light for specular highlights on the sphere surfaces. The grid helper provides a visual ground plane so you can see the spheres bouncing relative to a surface.

OrbitControls are added with auto-rotate enabled after a short delay, giving the scene a cinematic feel even before the user interacts. Damping is set to 0.12 for smooth camera deceleration.

Creating the Spheres

500 spheres are created in a loop using THREE.SphereGeometry(radius, 32, 32) with 32 segments for perfectly smooth surfaces. Each sphere gets a random radius between 0.1 and 0.25 units for visual variety.

Colors are distributed evenly across the HSL spectrum using hue = i / SPHERE_COUNT, creating a rainbow effect. The material is MeshPhongMaterial with shininess set to 100 for glossy reflections, plus a subtle emissive glow.

Each sphere stores unique userData properties: bounceHeight (1-6 units), bounceSpeed (2-8 cycles per second), and bounceOffset (random phase). This ensures no two spheres move identically.

Audio Integration

When the user clicks Play, a THREE.AudioListener is attached to the camera and a THREE.PositionalAudio object is created. The audio file is loaded asynchronously using THREE.AudioLoader.

Once the buffer is loaded and playback starts, a THREE.AudioAnalyser is created with an FFT size of 128. This gives us 64 frequency bins that update every frame. We sum all frequency values and divide by the maximum possible to get a normalized 0-1 value representing overall audio intensity.

The listener is only added once to prevent stacking multiple audio contexts on repeated play/stop cycles.

The Animation Loop

Every frame, the animate function calculates the current frequency value (0 when silent, approaching 1 at peak volume). Each sphere Y position is set using: Math.sin(time * speed + offset) * height * freq.

The sine wave creates smooth oscillation, the speed and offset make each sphere unique, and multiplying by freq means the bouncing only happens when music is playing. When the audio stops, freq drops to 0 and all spheres settle back to Y=0.

Colors also react with frequency using setHSL(baseHue, 1, 0.45 + freq * 0.35), making them glow brighter during loud passages. The emissive channel adds an inner glow proportional to the audio intensity.

Tips for Customization

Try changing SPHERE_COUNT to 2000+ for a denser field, or reduce to 100 for better mobile performance. Adjust bounceHeight range for more dramatic or subtle movement.

You can map individual frequency bins to specific spheres instead of using the average for a spectrum analyzer effect. Replace the audio file URL with any MP3 to use your own music.

For a different visual style, try replacing SphereGeometry with IcosahedronGeometry or OctahedronGeometry for faceted crystal-like particles.