threejs-lighting

1# Three.js Lighting
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16 
17const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
18camera.position.set(4, 3, 8);
19 
20// A single directional light: intensity is a plain multiplier, no distance falloff
21const dirLight = new THREE.DirectionalLight(0xffffff, 3);
22dirLight.position.set(5, 10, 5);
23scene.add(dirLight);
24 
25const floor = new THREE.Mesh(
26  new THREE.PlaneGeometry(20, 20),
27  new THREE.MeshStandardMaterial({ color: 0x808080 })
28);
29floor.rotation.x = -Math.PI / 2;
30scene.add(floor);
31 
32const mesh = new THREE.Mesh(
33  new THREE.BoxGeometry(1, 1, 1),
34  new THREE.MeshStandardMaterial({ color: 0x3a76c4 })
35);
36scene.add(mesh);
37 
38// Shadows need three switches: renderer, light, and the meshes that cast and receive
39renderer.shadowMap.enabled = true;
40dirLight.castShadow = true;
41mesh.castShadow = true;
42floor.receiveShadow = true;
43 
44function animate() {
45  renderer.render(scene, camera);
46}
47 
48renderer.setAnimationLoop(animate);
49```
50 
51## Light Types and Units
52 
53| Light | Shadows | Intensity | Notes |
54|---|---|---|---|
55…