diff --git a/examples/webgl_lights_spotlight.html b/examples/webgl_lights_spotlight.html
index d78c179b2a3d60e02df785e5a3d9e6034e34ef55..9b781a4e1075d637fc487e486c4c82503931532b 100644
--- a/examples/webgl_lights_spotlight.html
+++ b/examples/webgl_lights_spotlight.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - lights - spot light</title>
+		<title>three.js webgl - lights - spotlight</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -33,231 +33,203 @@
 	</head>
 	<body>
 
-		<div id="container"></div>
 		<div id="info">
-			<a href="http://threejs.org" target="_blank">three.js</a> - Just to show the spot light and it's edge - by <a href="http://master-domain.com" target="_blank">Master James</a><br />
-			Right click and drag to move OrbitControls, center across the edge of the shadow.<br />
-			Click to set random color CTRL-Click for White.<br />
+			<a href="http://threejs.org" target="_blank">three.js</a> webgl - spotlight by <a href="http://master-domain.com" target="_blank">Master James</a><br />
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="../examples/js/libs/dat.gui.min.js"></script>
-		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/Detector.js"></script>
 
 		<script>
-			var container = document.getElementById( 'container' );
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var rnd = new THREE.WebGLRenderer();
-			var cam = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 20000);
-			var orb = new THREE.OrbitControls(cam, rnd.domElement);
+			var renderer = new THREE.WebGLRenderer();
+
+			var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
+
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+			var scene = new THREE.Scene();
 
-			var scn = new THREE.Scene();
 			var matFloor = new THREE.MeshPhongMaterial();
-			var matBox = new THREE.MeshPhongMaterial();
-			var geoFloor = new THREE.BoxGeometry(2000, 0.1, 2000);
-			var geoBox = new THREE.BoxGeometry(Math.PI, Math.sqrt(2), Math.E);
-			var mshFloor = new THREE.Mesh(geoFloor, matFloor);
-			var mshBox = new THREE.Mesh(geoBox, matBox);
-			var amb = new THREE.AmbientLight(0x121422);
-			var spt = new THREE.SpotLight(0xFFFFFF);
-			var lightHelper;
-			var ray = new THREE.Raycaster();
-			var mouseDown = new THREE.Vector2();
-			var mouse = new THREE.Vector2();
+			var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff } );
+
+			var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
+			var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
 
+			var mshFloor = new THREE.Mesh( geoFloor, matFloor );
+			var mshBox = new THREE.Mesh( geoBox, matBox );
+
+			var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+
+			var spotLight = new THREE.SpotLight( 0xffffff, 1 );
+			var lightHelper;
 
 			var gui, guiElements, param = { color: '0xffffff' };
 
 			function init() {
-				rnd.shadowMap.enabled = true;
-				rnd.shadowMap.type = THREE.PCFSoftShadowMap;
-				rnd.gammaInput = true;
-				rnd.gammaOutput = true;
-				rnd.antialias = true;
-				rnd.domElement.addEventListener('mousedown', onDocumentClick);
-				rnd.domElement.addEventListener('mouseup', onDocumentClick);
-
-				cam.position.set(65, 8, -10);
-
-				spt.position.set(15, 40, 35);
-				spt.castShadow = true;
-				spt.angle = 0.75;
-				spt.exponent = 2.0;
-				spt.penumbra = 0.05;
-				spt.decay = 2;
-				spt.distance = 500;
-				spt.shadow.mapSize.width = 1024;
-				spt.shadow.mapSize.height = 1024;
-				spt.shadow.camera.near = 0.1;
-				spt.shadow.camera.far = 20000;
-
-				lightHelper = new THREE.SpotLightHelper( spt );
+
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				camera.position.set( 65, 8, - 10 );
+
+				spotLight.position.set( 15, 40, 35 );
+				spotLight.castShadow = true;
+				spotLight.angle = Math.PI / 4;
+				spotLight.penumbra = 0.05;
+				spotLight.decay = 2;
+				spotLight.distance = 200;
+				spotLight.shadow.mapSize.width = 1024;
+				spotLight.shadow.mapSize.height = 1024;
+				spotLight.shadow.camera.near = 1;
+				spotLight.shadow.camera.far = 200;
+
+				lightHelper = new THREE.SpotLightHelper( spotLight );
 
 				matFloor.color.set( 0x808080 );
-				randomColor( matBox );
 
 				mshFloor.receiveShadow = true;
-				mshFloor.position.set(0, -0.05, 0);
+				mshFloor.position.set( 0, - 0.05, 0 );
 
 				mshBox.castShadow = true;
-				mshBox.receiveShadow = true;
-				mshBox.position.set(40, 1.8, 0);
-
-				scn.add(cam);
-				scn.add(mshFloor);
-				scn.add(mshBox);
-				scn.add(amb);
-				scn.add(spt);
-				scn.add( new THREE.AxisHelper( 10 ) );
-				scn.add( lightHelper );
-
-				document.body.appendChild(rnd.domElement);
-				onResize();
-				window.addEventListener('resize', onResize, false);
-
-				orb.addEventListener('change', render);
-				orb.update();
+				mshBox.position.set( 40, 1.8, 0 );
+
+				scene.add( camera );
+				scene.add( mshFloor );
+				scene.add( mshBox );
+				scene.add( ambient );
+				scene.add( spotLight );
+				scene.add( new THREE.AxisHelper( 10 ) );
+				scene.add( lightHelper );
+
+				document.body.appendChild( renderer.domElement );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.addEventListener( 'change', render );
+				controls.minDistance = 20;
+				controls.maxDistance = 500;
+				controls.maxPolarAngle = Math.PI / 2;
+				controls.enablePan = false;
+				controls.target.copy( mshBox.position );
+				controls.update();
+
+				window.addEventListener( 'resize', onResize, false );
+
 			}
 
 			function onResize() {
-				rnd.setSize(window.innerWidth, window.innerHeight);
-				cam.aspect = (window.innerWidth / window.innerHeight);
-				cam.updateProjectionMatrix();
-				orb.target = mshBox.position;
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				camera.aspect = ( window.innerWidth / window.innerHeight );
+				camera.updateProjectionMatrix();
+
 			}
 
 			function render() {
+
 				lightHelper.update(); // required
-				rnd.render(scn, cam);
+				renderer.render( scene, camera );
+
 			}
 
 			function clearGui() {
+
 				if ( gui ) gui.destroy();
 
 				gui = new dat.GUI();
-				gui.width = 190;
-				var gStyle = gui.domElement.style;
-				gStyle.position = "absolute";
-				gStyle.top = "48px";
-				gStyle.height = "220px";
 
 				gui.open();
+
 			}
 
 			function buildGui() {
 
 				clearGui();
 
-				addGui( 'light color', spt.color.getHex(), function( val ) {
-					spt.color.setHex( val );
-					render();
-				}, true );
+				addGui( 'light color', spotLight.color.getHex(), function( val ) {
 
-				addGui( 'intensity', spt.intensity, function( val ) {
-					spt.intensity = val;
+					spotLight.color.setHex( val );
 					render();
-				}, false, 0, 10 );
 
-				addGui( 'distance', spt.distance, function( val ) {
-					spt.distance = val;
-					render();
-				}, false, 0, 1000 );
+				}, true );
 
-				addGui( 'angle', spt.angle, function( val ) {
-					spt.angle = val;
-					render();
-				}, false, 0, 1.56 );
+				addGui( 'intensity', spotLight.intensity, function( val ) {
 
-				addGui( 'penumbra', spt.penumbra, function( val ) {
-					spt.penumbra = val;
+					spotLight.intensity = val;
 					render();
-				}, false, 0, 1 );
 
-				addGui( 'decay', spt.decay, function( val ) {
-					spt.decay = val;
-					render();
-				}, false, 0, 100 );
+				}, false, 0, 2 );
 
-			}
+				addGui( 'distance', spotLight.distance, function( val ) {
 
-			function addGui( name, value, callback, isColor, min, max ) {
-				var node;
-				param[ name ] = value;
-				if ( isColor ) {
-					node = gui.addColor( param, name ).onChange( function() {
-						callback( param[ name ] );
-					} );
-				}
-				else if ( typeof value == 'object' ) {
-					node = gui.add( param, name, value ).onChange( function() {
-						callback( param[ name ] );
-					} );
-				}
-				else {
-					node = gui.add( param, name, min, max ).onChange( function() {
-						callback( param[ name ] );
-					} );
-				}
-				return node;
-			}
+					spotLight.distance = val;
+					render();
 
-			function onDocumentClick( event ) {
+				}, false, 0, 200 );
 
-				event.preventDefault();
+				addGui( 'angle', spotLight.angle, function( val ) {
 
-				var rndDom = rnd.domElement;
+					spotLight.angle = val;
+					render();
 
-				if( event.type === 'mousedown' ) {
+				}, false, 0, Math.PI / 3 );
 
-					mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+				addGui( 'penumbra', spotLight.penumbra, function( val ) {
 
-					mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+					spotLight.penumbra = val;
+					render();
 
-				}
-				else {
+				}, false, 0, 1 );
 
-					mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+				addGui( 'decay', spotLight.decay, function( val ) {
 
-					mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+					spotLight.decay = val;
+					render();
 
-					if (mouseDown.distanceTo(mouse) < 0.0075) {
+				}, false, 1, 2 );
 
-						ray.setFromCamera( mouse, cam );
+			}
 
-						var found = ray.intersectObjects( [ mshBox, mshFloor ] );
+			function addGui( name, value, callback, isColor, min, max ) {
 
-						if ( found.length > 0 ) {
+				var node;
+				param[ name ] = value;
 
-							if( event.ctrlKey === false ) randomColor( found[0].object );
+				if ( isColor ) {
 
-							else found[0].object.material.color.set( 0xffffff );
+					node = gui.addColor( param, name ).onChange( function() {
 
-							render();
+						callback( param[ name ] );
 
-						}
+					} );
 
-					}
+				} else if ( typeof value == 'object' ) {
 
-				}
+					node = gui.add( param, name, value ).onChange( function() {
 
-			}
+						callback( param[ name ] );
 
-			function randomColor( target ) {
+					} );
 
-				if ( target !== undefined ) {
+				} else {
 
-					if ( target.material !== undefined ) target = target.material;
+					node = gui.add( param, name, min, max ).onChange( function() {
 
-					if ( target.color !== undefined ) {
+						callback( param[ name ] );
 
-						target.color.setHex( 0xffffff * Math.random() );
+					} );
 
-					}
 				}
 
+				return node;
+
 			}
 
 			init();
