This is a Next.js project bootstrapped with create-next-app.
Audio-Reactive 3D Scene Editor built with Next.js, React Three Fiber, and Three.js WebGPU/TSL## Getting Started
Create stunning audio-reactive 3D visualizations with a professional, modular editor.yarn dev
---pnpm dev
- 🎨 **Intuitive UI** - Scene tree, inspector, timeline, and 3D viewport
- 🎵 **Audio-Reactive** - Sync visuals to audio with waveform analysisOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.
- 🎬 **Keyframe Animation** - Full keyframing powered by AnimeJS
- 🎮 **WebGPU/TSL** - Modern, high-performance 3D renderingYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
- 📦 **Modular Architecture** - Clean, feature-based organization
- 🎯 **Type-Safe** - 100% TypeScript with strict modeThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
- 🎨 **Dark UI** - Beautiful, minimalistic interface
- 📚 **Well Documented** - Comprehensive guides and references## Learn More
---To learn more about Next.js, take a look at the following resources:
## 🚀 Quick Start- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
```bash
# Install dependenciesYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
pnpm install
## Deploy on Vercel
# Run development server
pnpm devThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
# Open your browserCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
# http://localhost:3000/editor
Start here: DOC-INDEX.md - Complete documentation index
| Document | Description |
|---|---|
| DOC-INDEX.md | 📖 Documentation navigation guide |
| PROJECT-COMPLETE.md | 🎯 Complete project overview |
| ARCHITECTURE.md | 🏗️ System architecture |
| README-EDITOR.md | 📘 User guide |
| QUICK-REFERENCE.md | ⚡ Developer recipes |
| DIAGRAMS.md | 📊 Visual diagrams |
| CHECKLIST.md | ✅ Implementation status |
┌───────────────────────────────────────────────────┐
│ Compose Bar │
│ [Cube] [Pyramid] [Torus] [Shader] [Waveform] │
├─────────┬──────────────────────┬─────────────────┤
│ Scene │ │ Inspector │
│ Tree │ 3D Viewport │ Panel │
│ │ │ │
│ □ Cube │ [Scene] │ - Transform │
│ ○ Cam │ │ - Material │
│ │ │ - Keyframes │
├─────────┴──────────────────────┴─────────────────┤
│ Timeline Controls & Keyframes │
└───────────────────────────────────────────────────┘
- Scene Tree - Manage objects, toggle visibility, delete
- Inspector - Edit transforms, materials, add keyframes
- Compose Bar - Create primitives, shaders, cameras
- Timeline - Play/pause, scrub, visualize keyframes
- Viewport - Real-time 3D preview with orbit controls
- Next.js 15 - React framework
- React Three Fiber - 3D in React
- Three.js WebGPU/TSL - Modern shaders
- AnimeJS - Keyframe animation
- ToneJS - Audio analysis
- Jotai - State management
- Tailwind CSS - Styling
- TypeScript - Type safety
src/
├── app/ # Next.js pages
│ ├── page.tsx # Landing page
│ └── editor/page.tsx # Editor app
├── components/ui/ # Shared UI components
├── features/ # Feature modules
│ ├── audio/ # Audio handling
│ ├── canvas/ # 3D rendering
│ ├── compose/ # Object creation
│ ├── inspector/ # Property editor
│ ├── keyframes/ # Animation system
│ ├── scene/ # Scene state
│ └── timeline/ # Timeline UI
└── lib/ # Utilities & shaders
- Primitives - Cube, Pyramid, Torus, Cylinder (with materials)
- GLB Models - Import 3D models with animations
- Shaders - TSL-based shader planes (Rainbow shader included)
- Waveform Instancer - Audio-reactive object instancing
- Waveform Lines - Audio-reactive line visualizations
- Cameras - Keyframeable cameras with active state
- Lights - Ambient, Directional, Point, Spot, Environment
- Postprocessors - TSL post-effects framework
- Particles - Audio and Dynamic particle systems with force fields
- Transform: Position (XYZ), Rotation (XYZ), Scale (XYZ)
- Material: Color, Roughness, Metalness, Emissive Color, Emissive Intensity
- Visibility: Boolean
- Camera: isActive (Boolean)
- GLB Model: activeAnimation (String - switches between animations)
// lib/myShader.ts
import { Fn, time, vec3 } from "three/tsl";
import * as THREE from "three/webgpu";
export function createMyShader() {
const myUniform = uniform(0);
const fragment = Fn(() => {
const t = time.mul(0.5);
return vec3(t.sin(), t.cos(), myUniform);
});
const material = new THREE.NodeMaterial();
material.fragmentNode = fragment();
return { material, uniforms: { myUniform } };
}See QUICK-REFERENCE.md for more examples.
- Scene management system
- Object creation & editing
- Keyframe system
- Timeline UI
- Audio integration
- 3D rendering (WebGPU)
- Comprehensive documentation
- Wire AnimeJS timeline execution
- Audio playback sync
- Waveform visualization
- More shader presets
- Save/Load projects
See CHECKLIST.md for detailed status.
Contributions welcome! Please follow our modular architecture:
- Create features in
src/features/ - Keep files small and focused
- Colocate related code
- Use TypeScript
- Update documentation
See QUICK-REFERENCE.md for development patterns.
MIT License
Built with:
- Next.js by Vercel
- Three.js by Mr.doob
- React Three Fiber by Poimandres
- AnimeJS by Julian Garnier
- ToneJS by Yotam Mann
- Jotai by Daishi Kato
- Tailwind CSS by Tailwind Labs
Version: 1.0.0 (Foundation Complete)
- ✅ Core Features: Complete
- ✅ UI Components: Complete
- ✅ Documentation: Complete
- ⏳ Integration: 95%
Ready to create stunning audio-reactive 3D visualizations! 🎨🎵🎬
Made with ❤️ using Next.js, React Three Fiber, and WebGPU