Chapter 140: RectAreaLight

Core Idea

This class emits light uniformly across the face a rectangular plane. This light type can be used to simulate light sources such as bright windows or strip lighting.

Important Notes:

There is no shadow support.
Only PBR materials are supported.
You have to include RectAreaLightUniformsLib (WebGLRenderer) or RectAreaLightTexturesLib (WebGPURenderer) into your app and init the uniforms/textures.

Key Concepts

height : number: The height of the light.
isRectAreaLight : boolean (readonly): This flag can be used for type testing.
power : number: The light's power. Power is the luminous power of the light measured in lumens (lm). Changing the power will also change the light's intens…
width : number: The width of the light.

Code Examples

RectAreaLightUniformsLib.init(); // only relevant for WebGLRenderer
THREE.RectAreaLightNode.setLTC( RectAreaLightTexturesLib.init() ); //  only relevant for WebGPURenderer
const intensity = 1; const width = 10; const height = 10;
const rectLight = new THREE.RectAreaLight( 0xffffff, intensity, width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

What it demonstrates: Typical usage of RectAreaLight.

Reference Tables

Constructor

Signature
`new RectAreaLight( color : number

Properties

Property	Description
`.height : number`	The height of the light.
`.isRectAreaLight : boolean (readonly)`	This flag can be used for type testing.
`.power : number`	The light's power. Power is the luminous power of the light measured in lumens (lm). Changing the power will also change the light's intensity.
`.width : number`	The width of the light.

Key Takeaways

RectAreaLight extends: EventDispatcher → Object3D → Light
Most relevant properties: height, isRectAreaLight, power, width.

Connects To

EventDispatcher: parent class
Object3D: parent class
Light: parent class
Source: src/lights/RectAreaLight.js