Added .focus to GUI, plus clean up

examples/webgl_lights_spotlight.html

@@ -32,14 +32,16 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
+
 				renderer.shadowMap.enabled = true;
+
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 65, 8, - 10 );
+				camera.position.set( 160, 40, 10 );
 
 				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
@@ -53,15 +55,16 @@
 				spotLight = new THREE.SpotLight( 0xffffff, 1 );
 				spotLight.position.set( 15, 40, 35 );
 				spotLight.angle = Math.PI / 4;
-				spotLight.penumbra = 0.05;
+				spotLight.penumbra = 0.1;
 				spotLight.decay = 2;
 				spotLight.distance = 200;
 
 				spotLight.castShadow = true;
-				spotLight.shadow.mapSize.width = 1024;
-				spotLight.shadow.mapSize.height = 1024;
+				spotLight.shadow.mapSize.width = 512;
+				spotLight.shadow.mapSize.height = 512;
 				spotLight.shadow.camera.near = 10;
 				spotLight.shadow.camera.far = 200;
+				spotLight.shadow.focus = 1;
 				scene.add( spotLight );
 
 				lightHelper = new THREE.SpotLightHelper( spotLight );
@@ -70,7 +73,7 @@
 				shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
 				scene.add( shadowCameraHelper );
 
-				scene.add( new THREE.AxesHelper( 10 ) );
+				//
 
 				var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
 
@@ -82,17 +85,18 @@
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
+				//
+
 				var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 1, 2 );
+				var geometry = new THREE.CylinderBufferGeometry( 5, 5, 2, 32, 1, false );
 
 				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.set( 40, 2, 0 );
+				mesh.position.set( 0, 5, 0 );
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				controls.target.copy( mesh.position );
-				controls.update();
+				render();
 
 				window.addEventListener( 'resize', onResize, false );
 
@@ -127,7 +131,8 @@
 					distance: spotLight.distance,
 					angle: spotLight.angle,
 					penumbra: spotLight.penumbra,
-					decay: spotLight.decay
+					decay: spotLight.decay,
+					focus: spotLight.shadow.focus
 				};
 
 				gui.addColor( params, 'light color' ).onChange( function ( val ) {
@@ -173,6 +178,13 @@
 
 				} );
 
+				gui.add( params, 'focus', 0, 1 ).onChange( function ( val ) {
+
+					spotLight.shadow.focus = val;
+					render();
+
+				} );
+
 				gui.open();
 
 			}