Merge pull request #20277 from WestLangley/dev_examples_rect_area

Examples: Use RectAreaLightHelper in RectAreaLight example

Author: mrdoob

examples/webgl_lights_rectarealight.html

@@ -21,13 +21,14 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { RectAreaLightHelper } from './jsm/helpers/RectAreaLightHelper.js';
 			import { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
 
 			var renderer, scene, camera;
 
 			var origin = new THREE.Vector3();
 
-			var rectLight;
+			var rectLight, rectLightHelper;
 
 			var param = {};
 			var stats;
@@ -76,13 +77,8 @@
 				rectLight.position.set( 5, 5, 0 );
 				scene.add( rectLight );
 
-				var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { side: THREE.BackSide } ) );
-				rectLightMesh.scale.x = rectLight.width;
-				rectLightMesh.scale.y = rectLight.height;
-				rectLight.add( rectLightMesh );
-
-				var rectLightMeshBack = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { color: 0x080808 } ) );
-				rectLightMesh.add( rectLightMeshBack );
+				rectLightHelper = new RectAreaLightHelper( rectLight );
+				rectLight.add( rectLightHelper );
 
 				var geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );
 				var matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
@@ -142,28 +138,24 @@
 				lightFolder.add( param, 'width', 1, 20 ).step( 0.1 ).onChange( function ( val ) {
 
 					rectLight.width = val;
-					rectLightMesh.scale.x = val;
 
 				} );
 
 				lightFolder.add( param, 'height', 1, 20 ).step( 0.1 ).onChange( function ( val ) {
 
 					rectLight.height = val;
-					rectLightMesh.scale.y = val;
 
 				} );
 
 				lightFolder.addColor( param, 'color' ).onChange( function ( val ) {
 
 					rectLight.color.setHex( val );
-					rectLightMesh.material.color.copy( rectLight.color ).multiplyScalar( rectLight.intensity );
 
 				} );
 
 				lightFolder.add( param, 'intensity', 0.0, 4.0 ).step( 0.01 ).onChange( function ( val ) {
 
 					rectLight.intensity = val;
-					rectLightMesh.material.color.copy( rectLight.color ).multiplyScalar( rectLight.intensity );
 
 				} );
 
@@ -249,6 +241,8 @@
 
 				}
 
+				rectLightHelper.update();
+
 				renderer.render( scene, camera );
 
 				stats.update();