184 lines
4.3 KiB
Markdown
184 lines
4.3 KiB
Markdown
# Lights
|
|
|
|
Illuminate 3D scenes with various light types.
|
|
|
|
## Ambient Light
|
|
|
|
Global illumination affecting all objects equally:
|
|
|
|
```javascript
|
|
const light = new THREE.AmbientLight(0x404040); // soft white
|
|
scene.add(light);
|
|
|
|
// Often used as base illumination with other lights
|
|
```
|
|
|
|
## Directional Light
|
|
|
|
Infinite distance light with parallel rays (sun-like):
|
|
|
|
```javascript
|
|
const light = new THREE.DirectionalLight(0xffffff, 1);
|
|
light.position.set(10, 10, 5);
|
|
light.target.position.set(0, 0, 0);
|
|
scene.add(light);
|
|
scene.add(light.target); // target must be in scene
|
|
|
|
// With shadows
|
|
light.castShadow = true;
|
|
light.shadow.mapSize.width = 2048;
|
|
light.shadow.mapSize.height = 2048;
|
|
light.shadow.camera.near = 0.5;
|
|
light.shadow.camera.far = 500;
|
|
light.shadow.camera.left = -10;
|
|
light.shadow.camera.right = 10;
|
|
light.shadow.camera.top = 10;
|
|
light.shadow.camera.bottom = -10;
|
|
|
|
// Visualize shadow camera
|
|
const helper = new THREE.CameraHelper(light.shadow.camera);
|
|
scene.add(helper);
|
|
```
|
|
|
|
## Point Light
|
|
|
|
Omnidirectional light from a point (lightbulb-like):
|
|
|
|
```javascript
|
|
const light = new THREE.PointLight(0xff0000, 1, 100, 2);
|
|
// params: color, intensity, distance (0 = infinite), decay
|
|
|
|
light.position.set(0, 10, 0);
|
|
scene.add(light);
|
|
|
|
// With shadows
|
|
light.castShadow = true;
|
|
light.shadow.mapSize.width = 1024;
|
|
light.shadow.mapSize.height = 1024;
|
|
light.shadow.camera.near = 0.5;
|
|
light.shadow.camera.far = 100;
|
|
```
|
|
|
|
## Spot Light
|
|
|
|
Cone-shaped light (spotlight-like):
|
|
|
|
```javascript
|
|
const light = new THREE.SpotLight(0xffffff, 1);
|
|
light.position.set(0, 10, 0);
|
|
light.target.position.set(0, 0, 0);
|
|
scene.add(light);
|
|
scene.add(light.target);
|
|
|
|
// Cone parameters
|
|
light.angle = Math.PI / 6; // cone angle
|
|
light.penumbra = 0.1; // edge softness (0-1)
|
|
light.decay = 2; // light falloff
|
|
light.distance = 100; // max range (0 = infinite)
|
|
|
|
// With shadows
|
|
light.castShadow = true;
|
|
light.shadow.mapSize.width = 1024;
|
|
light.shadow.mapSize.height = 1024;
|
|
```
|
|
|
|
## Hemisphere Light
|
|
|
|
Sky/ground two-color lighting:
|
|
|
|
```javascript
|
|
const light = new THREE.HemisphereLight(
|
|
0x0000ff, // sky color (blue)
|
|
0x00ff00, // ground color (green)
|
|
0.6 // intensity
|
|
);
|
|
scene.add(light);
|
|
|
|
// Good for outdoor scenes
|
|
```
|
|
|
|
## RectArea Light (Addon)
|
|
|
|
Rectangular area light (realistic surface illumination):
|
|
|
|
```javascript
|
|
import { RectAreaLight } from 'three/addons/lights/RectAreaLight.js';
|
|
|
|
const light = new RectAreaLight(0xffffff, 5, 10, 10);
|
|
// params: color, intensity, width, height
|
|
|
|
light.position.set(0, 5, 0);
|
|
light.lookAt(0, 0, 0);
|
|
scene.add(light);
|
|
|
|
// Requires WebGL 2.0
|
|
```
|
|
|
|
## Shadow Configuration
|
|
|
|
Global renderer settings:
|
|
|
|
```javascript
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // soft shadows
|
|
|
|
// Shadow types:
|
|
// THREE.BasicShadowMap - fast, aliased
|
|
// THREE.PCFShadowMap - smoother
|
|
// THREE.PCFSoftShadowMap - softer (default)
|
|
// THREE.VSMShadowMap - variance shadow maps
|
|
|
|
// Objects must opt-in to shadows
|
|
mesh.castShadow = true; // object casts shadows
|
|
mesh.receiveShadow = true; // object receives shadows
|
|
```
|
|
|
|
## Light Helpers
|
|
|
|
Visualize light positions and directions:
|
|
|
|
```javascript
|
|
// Directional light
|
|
const helper = new THREE.DirectionalLightHelper(light, 5);
|
|
scene.add(helper);
|
|
|
|
// Point light
|
|
const helper = new THREE.PointLightHelper(light, 1);
|
|
scene.add(helper);
|
|
|
|
// Spot light
|
|
const helper = new THREE.SpotLightHelper(light);
|
|
scene.add(helper);
|
|
|
|
// Hemisphere light
|
|
const helper = new THREE.HemisphereLightHelper(light, 5);
|
|
scene.add(helper);
|
|
|
|
// RectArea light
|
|
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
|
|
const helper = new RectAreaLightHelper(light);
|
|
light.add(helper);
|
|
```
|
|
|
|
## Light Intensity & Units
|
|
|
|
```javascript
|
|
// Intensity values depend on physically-based rendering:
|
|
// - Lower values (0.1-1) for ambient/hemisphere
|
|
// - Higher values (1-10) for directional/point/spot
|
|
// - Very high (10-100+) for small area lights
|
|
|
|
// Physical light units (optional)
|
|
renderer.physicallyCorrectLights = true; // deprecated in newer versions
|
|
// Use intensity in candelas (cd) for point/spot lights
|
|
```
|
|
|
|
## Performance Tips
|
|
|
|
- Limit number of lights (3-5 for good performance)
|
|
- Use ambient + 1-2 directional lights for outdoor scenes
|
|
- Bake lighting into textures for static scenes
|
|
- Use lightmaps for complex static lighting
|
|
- Shadows are expensive - use selectively
|
|
- Lower shadow map resolution for better performance
|