Made area lights example a bit more fun.

I tried to replace the box.js with CubeGeometry but I guess material.side is still not implemented.

examples/webgl_lights_deferred_arealights.html

@@ -92,8 +92,7 @@
 
 			// lights
 
-			var numLights = 50;
-			var lights = [];
+			var areaLight1, areaLight2, areaLight3;
 
 			//
 
@@ -182,7 +181,7 @@
 
 			function initLights() {
 
-				var areaLight1 = new THREE.AreaLight( 0xffffff, 1 );
+				areaLight1 = new THREE.AreaLight( 0xffffff, 1 );
 				areaLight1.position.set( 0.0001, 10.0001, -19.5001 );
 				areaLight1.rotation.set( -0.74719, 0.0001, 0.0001 );
 				areaLight1.width = 10;
@@ -195,7 +194,7 @@
 
 				//
 
-				var areaLight2 = new THREE.AreaLight( 0x33ff66, 1.5 );
+				areaLight2 = new THREE.AreaLight( 0x33ff66, 1.5 );
 				areaLight2.position.set( -19.0001, 3.0001, 0.0001 );
 				areaLight2.rotation.set( -1.5707, 0.0001, 1.5707 );
 				areaLight2.width = 8;
@@ -208,7 +207,7 @@
 
 				//
 
-				var areaLight3 = new THREE.AreaLight( 0x3366ff, 1.5 );
+				areaLight3 = new THREE.AreaLight( 0x3366ff, 1.5 );
 				areaLight3.position.set( 19.0001, 3.0001, 0.0001 );
 				areaLight3.rotation.set( 1.5707, 0.0001, -1.5707 );
 				areaLight3.width = 8;
@@ -228,7 +227,7 @@
 				var loader = new THREE.BinaryLoader();
 				loader.load( "obj/box/box.js", function( geometry, materials ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffaa55, specular: 0x888888, shininess: 100 } ) );
+					var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffaa55, specular: 0x888888, shininess: 10 } ) );
 					object.position.x = 0;
 					object.position.y = 0;
 					object.scale.multiplyScalar( 2 );
@@ -290,6 +289,17 @@
 
 				camera.lookAt( target );
 
+				var time = Date.now();
+
+				areaLight1.position.x = Math.sin( Date.now() * 0.001 ) * 10;
+				areaLight1.position.y = Math.sin( Date.now() * 0.0013 ) * 5 + 5;
+
+				areaLight2.position.y = Math.sin( Date.now() * 0.0011 ) * 5 + 5;
+				areaLight2.position.z = Math.sin( Date.now() * 0.00113 ) * 10;
+
+				areaLight3.position.y = Math.sin( Date.now() * 0.00111 ) * 5 + 5;
+				areaLight3.position.z = Math.sin( Date.now() * 0.001113 ) * 10;
+
 				// render
 
 				renderer.render( scene, camera );