A 3D editor and creative coding environment that runs entirely in the browser. Built with React, Three.js, and TypeScript.
- Full 3D scene editor with transform controls (translate, rotate, scale)
- Physics simulation with Rapier
- Dynamic, static, and kinematic body types
- Realistic collision detection and response
- Configurable physics properties (mass, friction, restitution)
- Particle systems
- Particle systems
- Code editor for custom Three.js scripts
- Material and shader editor
- Timeline for animations
- Keyframe-based animation system
- Support for position, rotation, and scale keyframes
- Visual timeline editor with drag-and-drop keyframes
- Camera controls and preview
- Scene hierarchy management
- WebXR support
- Clone the repository
- Install dependencies
npm install
- Start the development server
npm run dev
This version of the Browser Lab has AI features disabled by default. To enable AI features like chat assistance and image generation, you'll need to:
-
Set up a Supabase project and enable the Edge Functions.
-
Add the following entries as Edge Function secrets in your Supabase project. You can find this under the "Secrets" tab within the "Edge Functions" section:
OPENAI_API_KEYwith your OpenAI API keySTABILITY_API_KEYwith your Stability AI API key
-
Create the Edge Functions under the 'Functions' tab within the 'Edge Functions' section. This ensures users can access AI functionality securely, without exposing any API keys.
-
Update the
.envfile with your Supabase URL and anon key:VITE_SUPABASE_URL=your_supabase_url_here VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
The following features require a Supabase connection:
- AI Chat Assistant: Uses OpenAI to generate Three.js code based on your prompts
- Audio Transcription: Converts speech to text for chat commands
- AI Image Generation: Uses Stability AI to transform your viewport captures based on text prompts
MIT