Improved RectAreaLight example.

examples/webgl_lights_rectarealight.html

@@ -53,37 +53,12 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
-			var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var renerer, scene, camera;
 
-			var scene = new THREE.Scene();
-			var origin = new THREE.Object3D();
-
-			var matStdParams = {
-				roughness: 0.0,
-				metalness: 0.0
-			};
-
-			var matStdFloor = new THREE.MeshStandardMaterial( matStdParams );
-			var matStdObjects = new THREE.MeshStandardMaterial( matStdParams );
-
-			var geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
-			var geoBox = new THREE.BoxGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
-			var geoSphere = new THREE.SphereGeometry( 1.5, 32, 32 );
-			var geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 100, 16 );
-
-			var mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
-			var mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
-			var mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
-			var mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
-
-			var amb = new THREE.AmbientLight( 0xffffff, 0.1 );
+			var origin = new THREE.Vector3();
 
 			var rectLight;
-			var rectLightHelper;
-
-			var ray = new THREE.Raycaster();
+			var rectLightMesh;
 
 			var param = {};
 			var stats;
@@ -93,6 +68,15 @@
 
 			function init() {
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				document.body.appendChild( renderer.domElement );
+
 				var gl = renderer.context;
 
 				// Check for float-RT support
@@ -112,114 +96,61 @@
 
 				}
 
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				renderer.gammaInput = true;
-				renderer.gammaOutput = true;
-				document.body.appendChild( renderer.domElement );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 20, 35 );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
+				scene = new THREE.Scene();
 
-				camera.position.set( 0, 20, 35 );
+				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				scene.add( ambient );
 
 				rectLight = new THREE.RectAreaLight( 0xffffff, 1, 10, 10 );
 				rectLight.position.set( 5, 5, 0 );
+				scene.add( rectLight );
 
-				rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
-				scene.add( rectLightHelper );
+				var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial() );
+				rectLightMesh.scale.x = rectLight.width;
+				rectLightMesh.scale.y = rectLight.height;
+				rectLight.add( rectLightMesh );
 
-				scene.add( camera );
-				scene.add( origin );
+				var rectLightMeshBack = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { color: 0x080808 } ) );
+				rectLightMeshBack.rotation.y = Math.PI;
+				rectLightMesh.add( rectLightMeshBack );
 
-				matStdFloor.color.set( 0x808080 );
-				matStdObjects.color.set( 0xA00000 );
+				var geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
+				var matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
+				var mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
+				scene.add( mshStdFloor );
 
-				mshStdBox.castShadow = true;
-				mshStdBox.receiveShadow = true;
+				var matStdObjects = new THREE.MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
+
+				var geoBox = new THREE.BoxGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
+				var mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
 				mshStdBox.position.set( 0, 5, 0 );
 				mshStdBox.rotation.set( 0, Math.PI / 2.0, 0 );
+				mshStdBox.castShadow = true;
+				mshStdBox.receiveShadow = true;
+				scene.add( mshStdBox );
 
+				var geoSphere = new THREE.SphereGeometry( 1.5, 32, 32 );
+				var mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
+				mshStdSphere.position.set( - 5, 5, 0 );
 				mshStdSphere.castShadow = true;
 				mshStdSphere.receiveShadow = true;
-				mshStdSphere.position.set( - 5, 5, 0 );
+				scene.add( mshStdSphere );
 
+				var geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 100, 16 );
+				var mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
 				mshStdKnot.position.set( 5, 5, 0 );
 				mshStdKnot.castShadow = true;
 				mshStdKnot.receiveShadow = true;
-
-				scene.add( mshStdFloor );
-				scene.add( mshStdBox );
-				scene.add( mshStdSphere );
 				scene.add( mshStdKnot );
-				scene.add( amb );
-				scene.add( rectLight );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.target.copy( mshStdBox.position );
 				controls.update();
 
-				buildGui();
-
-				window.addEventListener( 'resize', onResize, false );
-
-			}
-
-			function onResize() {
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				camera.aspect = ( window.innerWidth / window.innerHeight );
-				camera.updateProjectionMatrix();
-
-			}
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				if ( param.motion ) {
-
-					update();
-
-				}
-
-				rectLightHelper.update();
-
-				renderer.render( scene, camera );
-
-				stats.update();
-
-			}
-
-			function update() {
-
-				var t = ( Date.now() / 2000 );
-
-				// move light in circle around center
-				// change light height with sine curve
-
-				var r = 15.0;
-
-				var lx = r * Math.cos( t );
-				var lz = r * Math.sin( t );
-
-				var ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
-
-				rectLight.position.set( lx, ly, lz );
-				rectLight.lookAt( origin.position );
-
-			}
-
-			function render() {
-
-				rectLightHelper.update(); // required
-				rnd.render( scn, cam );
-
-			}
-
-
-			function buildGui() {
+				// GUI
 
 				var gui = new dat.GUI( { width: 300 } );
 				gui.open();
@@ -230,12 +161,11 @@
 					height: rectLight.height,
 					color: rectLight.color.getHex(),
 					intensity: rectLight.intensity,
-					'ambient': amb.intensity,
+					'ambient': ambient.intensity,
 					'floor color': matStdFloor.color.getHex(),
 					'object color': matStdObjects.color.getHex(),
 					'roughness': matStdFloor.roughness,
-					'metalness': matStdFloor.metalness,
-
+					'metalness': matStdFloor.metalness
 				};
 
 				gui.add( param, 'motion' );
@@ -245,30 +175,34 @@
 				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, 2 ).step( 0.01 ).onChange( function ( val ) {
+				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 );
 
 				} );
 
 				lightFolder.add( param, 'ambient', 0.0, 0.2 ).step( 0.01 ).onChange( function ( val ) {
 
-					amb.intensity = val;
+					ambient.intensity = val;
 
 				} );
 
@@ -308,6 +242,50 @@
 				// TODO: rect area light distance
 				// TODO: rect area light decay
 
+				//
+
+				window.addEventListener( 'resize', onResize, false );
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+			}
+
+			function onResize() {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				camera.aspect = ( window.innerWidth / window.innerHeight );
+				camera.updateProjectionMatrix();
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				if ( param.motion ) {
+
+					var t = ( Date.now() / 2000 );
+
+					// move light in circle around center
+					// change light height with sine curve
+
+					var r = 15.0;
+
+					var lx = r * Math.cos( t );
+					var lz = r * Math.sin( t );
+
+					var ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
+
+					rectLight.position.set( lx, ly, lz );
+					rectLight.lookAt( origin );
+
+				}
+
+				renderer.render( scene, camera );
+
+				stats.update();
+
 			}
 
 		</script>