Easily simulate 3D lighting scenes with this free Three.js lighting generator. Adjust light types, intensity, and position, then export ready-to-use JS code.
AI Generation Prompt
Technical Specification: Three.js Lighting Setup Simulator
Overview
A browser-based, interactive tool designed for 3D developers to visualize and generate Three.js lighting configurations. The application provides a real-time viewport to adjust light parameters and immediately exports the corresponding code.
Technical Constraints
- Architecture: Single HTML file using CDN-hosted scripts (Three.js, OrbitControls).
- State Management: In-memory object store. No
localStorageorsessionStoragepermitted. - Compatibility: Must function within a sandboxed iframe. No popups (alert/prompt/confirm).
- Aesthetic: Clean, professional, high-contrast light mode. High-quality shadows and typography.
UI Layout
- Header: Simple, clean application title and a "Copy Code" button.
- Main Tool Area: Split-pane design.
- Left Sidebar (Configuration):
- Dropdown to add new lights (Ambient, Directional, Point, Spot, Hemisphere).
- List of added lights with individual edit/delete controls.
- Property panels for selected light (color picker, intensity slider, position vector sliders, enable shadow checkbox).
- Center (3D Viewport):
- Full-screen space for the Three.js
WebGLRenderer. - Includes a grid helper and a default base geometry (e.g., a box or torus) to visualize shadows.
- OrbitControls included for camera manipulation.
- Full-screen space for the Three.js
- Bottom Panel (Code Export):
- Read-only text area with syntax highlighting showing the generated JavaScript.
- One-click copy to clipboard.
- Left Sidebar (Configuration):
Features
- Real-time Rendering: Instant updates to the 3D scene upon changing any light parameter.
- Multi-Light Support: Ability to add multiple instances of different light types.
- Helper Visibility: Toggle button to show/hide light helper visualizers (e.g.,
SpotLightHelper). - Code Generation Engine: A module that traverses the in-memory lighting state and formats it into clean, ES6-compliant Three.js code.
- Responsive Controls: Sidebar collapses on smaller screens into a toggleable drawer to maximize viewport space.
Design System & Aesthetics
- Color Palette:
- Background:
#FFFFFF - Surface:
#F9FAFB(Subtle off-white for panels) - Border:
#E5E7EB - Text:
#111827(Strong dark grey) - Primary Action:
#2563EB(Professional Blue)
- Background:
- Transitions: All UI interactions use
transition: all 0.2s ease-in-outfor a smooth, app-like feel. - Typography: Sans-serif stack (system fonts), emphasizing clarity for numerical values.
Implementation Steps
- Initialize
THREE.Scene,THREE.PerspectiveCamera, andTHREE.WebGLRenderer. - Add a
THREE.GridHelperand a center-alignedTHREE.Mesh(e.g., TorusKnot) to act as a lighting reference object. - Create an array
lightState = []to hold objects representing light settings. - Implement an
updateScene()function that clears existing lights from the scene and re-adds them based on thelightStatearray. - Bind UI inputs (Range sliders, Selects) to update specific objects in
lightStateand triggerupdateScene(). - Create a
generateCode()function that iterates throughlightStateand concatenates string templates into a formatted code block.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I use the Three.js lighting simulator?
To use this simulator, simply select a light type from the control panel to add it to your 3D scene. You can adjust parameters like intensity, color, position, and shadow settings using the interactive sliders and color pickers on the left sidebar. The 3D scene updates in real-time, allowing you to visualize how your lighting setup will appear in your project. Once you are satisfied with your configuration, click the 'Export Code' button to copy the generated JavaScript code to your clipboard. You can then paste this code directly into your Three.js project to replicate the exact lighting configuration you designed in the simulator.
Can I export the code for my specific Three.js scene?
Yes, the tool is designed to generate standard, production-ready Three.js code based on the properties you have configured. The export function provides a clean code block containing the instantiation of your lights, the attachment of properties, and the addition to the scene graph. This exported code follows best practices for the Three.js library. It is formatted to be easily integrated into your existing rendering loop or scene initialization functions, saving you the time of manually calculating positions and intensity values for complex lighting setups.
What lighting types are supported in this tool?
This simulator supports all core Three.js lighting types, including AmbientLight, DirectionalLight, PointLight, SpotLight, and HemisphereLight. Each light type comes with its specific set of configurable parameters, such as angle and penumbra for SpotLights, or ground color for HemisphereLights. Additionally, the tool provides visual helpers for each light type, allowing you to see the direction and range of your lights within the 3D viewport. These helpers are automatically toggled on or off, giving you full control over your development workflow.
Is this lighting tool compatible with React Three Fiber?
While the code exported by this tool is written for vanilla Three.js, it is easily translatable to React Three Fiber (R3F). The property names, such as intensity, position, and color, remain identical between vanilla Three.js and R3F components. For example, if you export code for a PointLight, you can simply convert the instantiation logic into an <pointLight /> component with the props matched to the values you set in the simulator. The logic remains consistent, making this tool a great starting point for developers using any JavaScript framework.
