Reimagining VJing with the Three.js Visual Editor -An open-source playground for audio-reactive 3D visuals

If you're a VJ who thrives on real-time creativity, generative visuals, and audio-reactive magic, the Three.js Visual Editor might just be your new favorite sandbox. Inspired by TouchDesigner but built entirely in the browser, this open-source tool lets you patch together stunning 3D scenes using a node-based interface—no heavy installs, no proprietary lock-in.

🧩 What Is It?

The Three.js Visual Editor is a browser-based visual programming environment for creating 3D graphics and audio-reactive visuals. It’s built with:

• React Three Fiber for rendering
• React Flow for node-based editing
• Three.js for the 3D engine
• Web Audio API for sound analysis

Think of it as a modular playground where you can drag, drop, and wire up nodes to create visuals that pulse, rotate, and shimmer in sync with your music.

🎚️ Why VJs Should Care

Here’s what makes it a compelling tool for live performers and visual artists:

🔊 Audio Reactivity

• Use your microphone or audio files to drive visual parameters like scale, rotation, and color.
• Real-time analysis at 60fps ensures smooth, responsive visuals.

🧠 Node-Based Workflow

• Create scenes by connecting source nodes (like spheres, image planes, or GLB models) to effect nodes (audio-reactive or shader-based).
• The Output Node acts as your final render destination, complete with camera controls.

🎨 Custom Shaders

• Write your own GLSL vertex and fragment shaders directly in the browser.
• See changes instantly—perfect for experimenting with trippy effects or subtle textures.

🧪 Presets & Live Editing

• Load example scenes like “Audio Reactive Sphere” or “Shader Sphere” to get started fast.
• Every tweak updates the scene in real time, making it ideal for improvisation and live sets.

🚀 Getting Started

To run it locally:

bun install
bun run dev

Then open http://localhost:5173 in your browser. You’ll need Node.js 18+ or Bun, and a modern browser with WebGL and Web Audio support.

🛠️ Extend It, Hack It, Own It

The architecture is modular and open:

• Add new node types by creating components in src/components/nodes/
• Modify AudioManager.ts for advanced audio features like beat detection or multi-band analysis
• Integrate physics, post-processing, or animation systems for deeper complexity

🎥 Final Thoughts

Whether you're building a reactive sculpture for a gallery show or crafting hypnotic loops for a club night, the Three.js Visual Editor offers a flexible, hackable, and refreshingly open alternative to traditional VJ software. It’s not just a tool—it’s a canvas for your audiovisual imagination.

Ready to patch your next masterpiece? Dive into the GitHub repo and start building.