DirectionalLightElement

Represents a directional light source simulating parallel rays of light, typically used to mimic sunlight or other distant light sources. Supports configurable color, intensity, and shadow properties.

Creating a new Directional Light:

const directionalLight = new DirectionalLightElement();
directionalLight.color = '#ffffff';
directionalLight.intensity = 1.5;
directionalLight.shadowMapResolution = 1024;
directionalLight.shadowBias = 0.005;
directionalLight.shadowRadius = 2;
scene.add(directionalLight);

color: THREE.Color | string

The color of the directional light. Accepts a THREE.Color instance or a CSS color string (e.g., "#ffffff"). Determines the hue of the emitted light.

Example:

directionalLight.color = '#ffddaa';

intensity: number

The brightness or intensity of the light. Numeric value where 1 is standard intensity.

Example:

directionalLight.intensity = 2;

shadowMapResolution: number

Resolution of the shadow map texture used for rendering shadows. Higher values improve shadow detail at a performance cost. Typical values are powers of two like 512, 1024, 2048.

Example:

directionalLight.shadowMapResolution = 2048;

shadowBias: number

Shadow bias value to prevent visual artifacts like shadow acne. Small floating point number adjusting depth comparison in shadow mapping.

Example:

directionalLight.shadowBias = 0.01;

shadowRadius: number

Controls the softness of the shadow edges. Larger values produce blurrier shadows.

Example:

directionalLight.shadowRadius = 3;