Skip to main content

SpotLightElement

Represents a spotlight emitting a cone-shaped beam of light. Supports color, intensity, range, inner and outer cone angles, and shadow parameters.

Creating a new Spot Light:

const spotLight = new SpotLightElement();
spotLight.color = '#ffffff';
spotLight.intensity = 1.5;
spotLight.range = 50;
spotLight.innerConeAngle = Math.PI / 8;
spotLight.outerConeAngle = Math.PI / 4;
scene.add(spotLight);

color: THREE.Color | string

The color of the spotlight. Can be a THREE.Color or CSS color string.

Example:

spotLight.color = '#ffddaa';

intensity: number

The brightness or intensity of the spotlight.

Example:

spotLight.intensity = 2;

range: number

The effective range or distance of the spotlight. Light intensity falls off to zero beyond this distance.

Example:

spotLight.range = 50;

innerConeAngle: number

Inner cone angle (in radians) defining the fully lit region of the spotlight beam. Within this angle, light is at full intensity.

Example:

spotLight.innerConeAngle = Math.PI / 8;

outerConeAngle: number

Outer cone angle (in radians) defining the total beam spread. Between inner and outer angles, light intensity smoothly falls off to zero.

Example:

spotLight.outerConeAngle = Math.PI / 4;

shadowMapResolution: number

Resolution of the shadow map for the spotlight.

Example:

spotLight.shadowMapResolution = 1024;

shadowBias: number

Bias for shadow depth calculations to prevent artifacts.

Example:

spotLight.shadowBias = 0.005;

shadowRadius: number

Controls shadow softness by blurring shadow edges.

Example:

spotLight.shadowRadius = 2;