Skip to content

tlaze/threejs-Audio-Visualizer-Orb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🔊 Three.js Audio Visualizer Orb

badge

A real-time 3D audio visualizer built with React and Three.js. This interactive experience features a glowing, animated orb that reacts dynamically to music. Users can click anywhere on the screen to start audio playback and use built-in GUI controls to customize the orb’s appearance, including color, wireframe grid, and bloom intensity.


🎮 Live Demo

👉 Live Application


✨ Features

  • 🎧 Audio playback starts with a click
  • 🔊 Orb pulses and animates in sync with music frequencies
  • 🎨 Users can control:
    • Orb color
    • Wireframe/grid density
    • Shader animation behavior
  • 🌀 Real-time rendering with postprocessing effects like bloom

🛠 Built With

  • Three.js – WebGL-based 3D engine
  • React – JavaScript UI library
  • lil-gui – Lightweight interactive UI for tweaking settings
  • Web Audio API – For audio playback and frequency analysis
  • GLSL Shaders – For custom vertex and fragment effects

🚀 Getting Started

Clone the repo

git clone https://github.com/tlaze/threejs-Audio-Visualizer-Orb.git
cd threejs-Audio-Visualizer-Orb

About

Real-time Three.js audio visualizer that syncs a glowing, wireframe orb to sound frequencies. Includes interactive GUI controls for color and bloom effects. Audio playback starts on click and drives dynamic shader animations. Built with postprocessing, shaders, and audio analysis.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors