threejs-lighting

Three.js Lighting

When to Use

• You need to add or tune lighting in a Three.js scene.
• The task involves light types, shadows, environment lighting, or lighting performance tradeoffs.
• You want to improve scene readability, realism, or mood through Three.js lighting setup.

Quick Start

import * as THREE from "three";

// Basic lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

Light Types Overview

Light	Description	Shadow Support	Cost
AmbientLight	Uniform everywhere	No	Very Low
HemisphereLight	Sky/ground gradient	No	Very Low
DirectionalLight	Parallel rays (sun)	Yes	Low
PointLight	Omnidirectional (bulb)	Yes	Medium
SpotLight	Cone-shaped	Yes	Medium
RectAreaLight	Area light (window)	No\*	High

\*RectAreaLight shadows require custom solutions

AmbientLight

Illuminates all objects equally. No direction, no shadows.

// AmbientLight(color, intensity)
const ambi