WebGLRenderer: Added map support to RectAreaLight.

build/three.core.js

@@ -46680,6 +46680,15 @@ class RectAreaLight extends Light {
 		 */
 		this.height = height;
 
+		/**
+		 * A texture that modulates the light color. The texture is
+		 * projected onto the light's surface and sampled during shading.
+		 *
+		 * @type {?Texture}
+		 * @default null
+		 */
+		this.map = null;
+
 	}
 
 	/**
@@ -46708,6 +46717,7 @@ class RectAreaLight extends Light {
 
 		this.width = source.width;
 		this.height = source.height;
+		this.map = source.map;
 
 		return this;
 
@@ -46720,6 +46730,8 @@ class RectAreaLight extends Light {
 		data.object.width = this.width;
 		data.object.height = this.height;
 
+		if ( this.map && this.map.isTexture ) data.object.map = this.map.toJSON( meta ).uuid;
+
 		return data;
 
 	}

build/three.webgpu.js

@@ -50160,9 +50160,16 @@ class NodeBuilder {
 	 */
 	getSharedContext() {
 
-		({ ...this.context });
+		const context = { ...this.context };
 
-		return this.context;
+		delete context.material;
+		delete context.getUV;
+		delete context.getOutput;
+		delete context.getTextureLevel;
+		delete context.getAO;
+		delete context.getShadow;
+
+		return context;
 
 	}
 

build/three.webgpu.nodes.js

@@ -50160,9 +50160,16 @@ class NodeBuilder {
 	 */
 	getSharedContext() {
 
-		({ ...this.context });
+		const context = { ...this.context };
 
-		return this.context;
+		delete context.material;
+		delete context.getUV;
+		delete context.getOutput;
+		delete context.getTextureLevel;
+		delete context.getAO;
+		delete context.getShadow;
+
+		return context;
 
 	}
 

examples/jsm/helpers/RectAreaLightHelper.js

@@ -2,8 +2,6 @@ import {
 	BackSide,
 	BufferGeometry,
 	Float32BufferAttribute,
-	Line,
-	LineBasicMaterial,
 	Mesh,
 	MeshBasicMaterial
 } from 'three';
@@ -19,10 +17,10 @@ import {
  * light.add( helper );
  * ```
  *
- * @augments Line
+ * @augments Mesh
  * @three_import import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
  */
-class RectAreaLightHelper extends Line {
+class RectAreaLightHelper extends Mesh {
 
 	/**
 	 * Constructs a new rect area light helper.
@@ -33,13 +31,15 @@ class RectAreaLightHelper extends Line {
 	 */
 	constructor( light, color ) {
 
-		const positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, - 1, 0, 1, 1, 0 ];
+		const positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
+		const uvs = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0 ];
 
 		const geometry = new BufferGeometry();
 		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		geometry.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
 		geometry.computeBoundingSphere();
 
-		const material = new LineBasicMaterial( { fog: false } );
+		const material = new MeshBasicMaterial( { side: BackSide, fog: false } );
 
 		super( geometry, material );
 
@@ -59,16 +59,6 @@ class RectAreaLightHelper extends Line {
 
 		this.type = 'RectAreaLightHelper';
 
-		//
-
-		const positions2 = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
-
-		const geometry2 = new BufferGeometry();
-		geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
-		geometry2.computeBoundingSphere();
-
-		this.add( new Mesh( geometry2, new MeshBasicMaterial( { side: BackSide, fog: false } ) ) );
-
 	}
 
 	updateMatrixWorld() {
@@ -78,7 +68,6 @@ class RectAreaLightHelper extends Line {
 		if ( this.color !== undefined ) {
 
 			this.material.color.set( this.color );
-			this.children[ 0 ].material.color.set( this.color );
 
 		} else {
 
@@ -89,15 +78,26 @@ class RectAreaLightHelper extends Line {
 			const max = Math.max( c.r, c.g, c.b );
 			if ( max > 1 ) c.multiplyScalar( 1 / max );
 
-			this.children[ 0 ].material.color.copy( this.material.color );
+		}
+
+		// Apply light's map texture to the helper mesh
+		if ( this.material.map !== this.light.map ) {
+
+			this.material.map = this.light.map;
+			this.material.needsUpdate = true;
+
+		}
+
+		if ( this.light.map !== null && this.color === undefined ) {
+
+			const intensityScale = Math.sqrt( this.light.intensity / 5 );
+			this.material.color.setScalar( Math.min( intensityScale, 2.0 ) );
 
 		}
 
 		// ignore world scale on light
 		this.matrixWorld.extractRotation( this.light.matrixWorld ).scale( this.scale ).copyPosition( this.light.matrixWorld );
 
-		this.children[ 0 ].matrixWorld.copy( this.matrixWorld );
-
 	}
 
 	/**
@@ -108,8 +108,6 @@ class RectAreaLightHelper extends Line {
 
 		this.geometry.dispose();
 		this.material.dispose();
-		this.children[ 0 ].geometry.dispose();
-		this.children[ 0 ].material.dispose();
 
 	}