DirectionalLight
Quick answer
DirectionalLight simulates a distant source such as the sun by lighting every surface from one direction. The vector from position to target defines that direction, and distance does not attenuate the light. Enable castShadow and size shadow.camera to cover the objects that must cast shadows.
new THREE.DirectionalLight ( color , intensity ) → DirectionalLight
Key points
- Point the light by moving position relative to target; the target must be added to the scene to take effect.
- Set shadow.mapSize and the shadow camera's orthographic bounds to tightly cover the shadow casters.
- Prefer shadow.normalBias over shadow.bias to reduce shadow acne without light leaking.
Example
const sun = new THREE.DirectionalLight(0xfff1d6, 2.6);
sun.position.set(-30, 45, 20); // 高、偏西、偏南
scene.add(sun);
sun.target.position.set(0, 0, 0);
scene.add(sun.target);sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
const sc = sun.shadow.camera;
sc.left = -60;
sc.right = 60;
sc.top = 60;
sc.bottom = -60;
sc.near = 1;
sc.far = 160;
sc.updateProjectionMatrix();
sun.shadow.bias = -0.0005;
sun.shadow.normalBias = 0.04;
renderer.shadowMap.enabled = true;Notes
- A shadow camera smaller than the scene clips shadows, so distant buildings stop casting them.
- Direction has no geographic meaning; convert sun altitude and azimuth to a vector yourself.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). DirectionalLight. https://www.jingweizhi.com/en/three/api/directional-light.html (accessed 2026-11-03).