Three.js Demos
Three.js Demos

Ambient vs Directional Light in Three.js

Three.js lighting fundamentals demo comparing ambient fill light and directional key light on a shaded sphere to show contrast, shadow depth, and readable form.

Key topics: three.js lighting, ambient light, directional light, three.js light types, lighting tutorial, mesh standard material

What this code does

- Ambient Fill Light: adds uniform base illumination so shadow regions retain detail instead of clipping to black.
- Directional Key Light: simulates sun-like parallel light rays that create clear highlights and directional shading.
- Combined Lighting Balance: demonstrates why most scenes blend fill + key lights rather than relying on one light source.
- Material Response: `MeshStandardMaterial` reveals roughness and form variation more clearly under directional lighting.
- Intensity Tuning: balancing light intensities improves readability, mood, and color fidelity in production scenes.
- Practical Outcome: this setup is a reliable baseline for product viewers, hero objects, and general-purpose 3D scenes.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const ambient = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambient)
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(2, 2, 2)
scene.add(dir)
← Back