diff --git a/docs/api/extras/helpers/SpotLightHelper.html b/docs/api/extras/helpers/SpotLightHelper.html
index 62982ae9e0a2f0..f427137d3f81c5 100644
--- a/docs/api/extras/helpers/SpotLightHelper.html
+++ b/docs/api/extras/helpers/SpotLightHelper.html
@@ -1,60 +1,65 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		[page:Object3D] &rarr;
-
-		<h1>[name]</h1>
-
-		<div class="desc">This displays a cylinder helper object for a [page:SpotLight] </div>
-
-
-		<h2>Example</h2>
-
-		<code>
-		var spotLight = new THREE.SpotLight( 0xffffff );
-		spotLight.position.set( 10, 10, 10 );
-		scene.add( spotLight );
-
-		var spotLightHelper = new THREE.SpotLightHelper( spotLight );
-		scene.add( spotLightHelper );
-		</code>
-
-
-		<h2>Constructor</h2>
-
-
-		<h3>[name]([page:SpotLight light])</h3>
-		<div>
-		light -- The [page:SpotLight] to display
-		</div>
-
-
-		<h2>Properties</h2>
-
-
-		<h3>[property:SpotLight light]</h3>
-		<div>
-		The [page:SpotLight]
-		</div>
-
-
-		<h2>Methods</h2>
-
-
-		<h3>[method:null update]()</h3>
-		<div>
-		Updates the light helper.
-		</div>
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">This displays a cylinder helper object for a [page:SpotLight] </div>
+
+		<h2>Example</h2>
+		<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
+		<a target="THREE_Examples" href="../examples/#webgl_lights_spotlight">View in Examples</a><br />
+		<h2>Other Examples</h2>
+
+		<div>[example:webgl_lights_spotlights lights / spotlights ]</div>
+
+		<h2>Code Example</h2>
+		<code>
+		var spotLight = new THREE.SpotLight( 0xffffff );
+		spotLight.position.set( 10, 10, 10 );
+		scene.add( spotLight );
+
+		var spotLightHelper = new THREE.SpotLightHelper( spotLight );
+		scene.add( spotLightHelper );
+		</code>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([page:SpotLight light])</h3>
+		<div>
+		light -- The [page:SpotLight] to display
+		</div>
+
+
+		<h2>Properties</h2>
+
+
+		<h3>[property:SpotLight light]</h3>
+		<div>
+		The [page:SpotLight]
+		</div>
+
+
+		<h2>Methods</h2>
+
+
+		<h3>[method:null update]()</h3>
+		<div>
+		Updates the light helper.
+		</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
diff --git a/docs/api/lights/SpotLight.html b/docs/api/lights/SpotLight.html
index 952c0d7309b6fa..d6f1b867ac7328 100644
--- a/docs/api/lights/SpotLight.html
+++ b/docs/api/lights/SpotLight.html
@@ -12,12 +12,18 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A point light that can cast shadow in one direction.</div>
+		<div class="desc">A point light that can cast a shadow in one direction within a falloff cone.</div>
 
 		<div class="desc">Affects objects using [page:MeshLambertMaterial] or [page:MeshPhongMaterial].</div>
 
 
 		<h2>Example</h2>
+
+		<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
+		<a target="THREE_Examples" href="../examples/#webgl_lights_spotlight">View in Examples</a><br />
+		<h2>Other Examples</h2>
+
+		<div>[example:webgl_lights_spotlights lights / spotlights ]</div><br />
 		<div>[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]</div>
 		<div>[example:webgl_interactive_draggablecubes interactive / draggablecubes ]</div>
 		<div>[example:webgl_materials_bumpmap_skin materials / bumpmap / skin ]</div>
@@ -25,6 +31,7 @@ <h2>Example</h2>
 		<div>[example:webgl_morphtargets_md2 morphtargets / md2 ]</div>
 		<div>[example:webgl_shading_physical shading / physical ]</div>
 
+		<h2>Code Example</h2>
 		<code>
 		// white spotlight shining from the side, casting shadow
 
@@ -43,6 +50,7 @@ <h2>Example</h2>
 		scene.add( spotLight );
 		</code>
 
+		<h2>Extra Examples</h2>
 		<div>
 		[example:webgl_materials_bumpmap materials / bumpmap]<br/>
 		[example:webgl_shading_physical shading / physical]<br/>
diff --git a/examples/files.js b/examples/files.js
index b3494c0f62b9f9..c80b45ce79af3c 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -60,6 +60,8 @@ var files = {
 		"webgl_lights_physical",
 		"webgl_lights_pointlights",
 		"webgl_lights_pointlights2",
+		"webgl_lights_spotlight",
+		"webgl_lights_spotlights",
 		"webgl_lines_colors",
 		"webgl_lines_cubes",
 		"webgl_lines_dashed",
diff --git a/examples/webgl_lights_spotlight.html b/examples/webgl_lights_spotlight.html
new file mode 100644
index 00000000000000..b139d38135871c
--- /dev/null
+++ b/examples/webgl_lights_spotlight.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - lights - spot light</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+			}
+
+			a {
+				color: #ff0080;
+				text-decoration: none;
+			}
+
+			a:hover {
+				color: #0080ff;
+			}
+		</style>
+	</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 />
+		</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/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 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 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 = 8192;
+				spt.shadow.mapSize.height = 8192;
+				// shadow camera helper
+				spt.shadowCameraHelper = new THREE.CameraHelper( spt.shadow.camera ); // colored lines
+				spt.shadow.camera.near = 0.1;
+				spt.shadow.camera.far = 20000;
+				//spt.shadow.camera.fov = (spt.angle * (360 / Math.PI));
+
+				lightHelper = new THREE.SpotLightHelper( spt );
+
+				matFloor.color.set( 0x808080 );
+				randomColor( matBox );
+
+				mshFloor.receiveShadow = true;
+				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( spt.shadowCameraHelper );
+				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.maxPolarAngle = (Math.PI / 2);
+				orb.update();
+			}
+
+			function onResize() {
+				rnd.setSize(window.innerWidth, window.innerHeight);
+				cam.aspect = (window.innerWidth / window.innerHeight);
+				cam.updateProjectionMatrix();
+				orb.target = mshBox.position;
+			}
+
+			function render() {
+				lightHelper.update(); // required
+				if ( spt.shadowCameraHelper ) spt.shadowCameraHelper.update();
+
+				rnd.render(scn, cam);
+			}
+
+			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( 'intensity', spt.intensity, function( val ) {
+					spt.intensity = val;
+					render();
+				}, false, 0, 10 );
+
+				addGui( 'distance', spt.distance, function( val ) {
+					spt.distance = val;
+					render();
+				}, false, 0, 1000 );
+
+				addGui( 'angle', spt.angle, function( val ) {
+					spt.angle = val;
+					render();
+				}, false, 0, 1.56 );
+
+				addGui( 'penumbra', spt.penumbra, function( val ) {
+					spt.penumbra = val;
+					render();
+				}, false, 0, 1 );
+
+				addGui( 'decay', spt.decay, function( val ) {
+					spt.decay = val;
+					render();
+				}, false, 0, 100 );
+
+			}
+
+			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;
+			}
+
+			function onDocumentClick( event ) {
+
+				event.preventDefault();
+
+				var rndDom = rnd.domElement;
+
+				if( event.type === 'mousedown' ) {
+
+					mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+					
+					mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+
+				}
+				else {
+
+					mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+
+					mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+
+					if (mouseDown.distanceTo(mouse) < 0.0075) {
+
+						ray.setFromCamera( mouse, cam );
+
+						var found = ray.intersectObjects( [ mshBox, mshFloor ] );
+
+						if ( found.length > 0 ) {
+
+							if( event.ctrlKey === false ) randomColor( found[0].object );
+
+							else found[0].object.material.color.set( 0xffffff );
+
+							render();
+							
+						}
+
+					}
+
+				}
+
+			}
+
+			function randomColor( target ) {
+
+				if ( target !== undefined ) {
+
+					if ( target.material !== undefined ) target = target.material;
+
+					if ( target.color !== undefined ) {
+
+						target.color.setHex( 0xffffff * Math.random() );
+
+					}
+				}
+
+			}
+
+			init();
+
+			buildGui();
+
+			render();
+
+		</script>
+	</body>
+</html>
diff --git a/examples/webgl_lights_spotlights.html b/examples/webgl_lights_spotlights.html
new file mode 100644
index 00000000000000..36b5cfe3484366
--- /dev/null
+++ b/examples/webgl_lights_spotlights.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - lights - spot light</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+			}
+
+			a {
+				color: #ff0080;
+				text-decoration: none;
+			}
+
+			a:hover {
+				color: #0080ff;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - This animates 3 Spot Lights - by <a href="http://master-domain.com" target="_blank">Master James</a><br />
+			Orbit Controls are available to navigate. Click to set random color CTRL-Click for White.<br />
+			Where the lights converge to make white light the shadows will appear as C M Y from light color pairing.
+		</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/Detector.js"></script>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
+
+		<script>
+			var stats, 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 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 spt1 = createSpotlight( { color: 0xFF7F00, angle:0.3 } );
+			var spt2 = createSpotlight( { color: 0x00FF7F, angle:0.3 } );
+			var spt3 = createSpotlight( { color: 0x7F00FF, angle:0.3 } );
+			var lightHelper1, lightHelper2, lightHelper3;
+			var ray = new THREE.Raycaster();
+			var mouseDown = new THREE.Vector2();
+			var mouse = new THREE.Vector2();
+
+			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(38, 20, -32);
+
+				spt1.position.set(15, 40, 45);
+				spt2.position.set(0, 40, 35);
+				spt3.position.set(-15, 40, 45);
+
+				lightHelper1 = new THREE.SpotLightHelper( spt1 );
+				lightHelper2 = new THREE.SpotLightHelper( spt2 );
+				lightHelper3 = new THREE.SpotLightHelper( spt3 );
+
+				matFloor.color.set( 0x808080 );
+
+				mshFloor.receiveShadow = true;
+				mshFloor.position.set(0, -0.05, 0);
+
+				randomColor( matBox );
+				matBox.opacity = 0.8;
+				mshBox.castShadow = true;
+				mshBox.receiveShadow = true;
+				mshBox.position.set(0, 5, 0);
+
+				scn.add(cam);
+				scn.add(mshFloor);
+				scn.add(mshBox);
+				scn.add(amb);
+				scn.add( spt1 );
+				scn.add( spt1.shadowCameraHelper );
+				scn.add( spt2 );
+				scn.add( spt2.shadowCameraHelper );
+				scn.add( spt3 );
+				scn.add( spt3.shadowCameraHelper );
+				scn.add( new THREE.AxisHelper( 7 ) );
+				scn.add( lightHelper1, lightHelper2, lightHelper3 );
+
+				document.body.appendChild(rnd.domElement);
+				onResize();
+				window.addEventListener('resize', onResize, false);
+
+				orb.addEventListener('change', render);
+				orb.object.position.set(46, 22, -21);
+				orb.target.set(-6, 7, 2);
+				orb.maxPolarAngle = (Math.PI / 2);
+				orb.update();
+			};
+
+			function createSpotlight( object ) {
+				var newObj = new THREE.SpotLight(object.color || 0xFFFFFF);
+				newObj.castShadow = object.castShadow || true;
+				newObj.angle = object.angle || 0.777;
+				newObj.exponent = object.exponent || 2.0;
+				newObj.penumbra = object.penumbra || 0.2;
+				newObj.decay = object.decay || 10;
+				newObj.distance = object.distance || 0.0;
+				newObj.shadow.mapSize.width = object.shadowWidth || 2048;
+				newObj.shadow.mapSize.height = object.shadowHeight || 2048;
+				// shadow camera helper
+				newObj.shadowCameraHelper = new THREE.CameraHelper( newObj.shadow.camera ); // colored lines
+				newObj.shadow.camera.near = 0.1;
+				newObj.shadow.camera.far = 20000;
+
+				return newObj;
+			};
+
+			function onResize() {
+				rnd.setSize(window.innerWidth, window.innerHeight);
+				cam.aspect = (window.innerWidth / window.innerHeight);
+				cam.updateProjectionMatrix();
+			};
+
+			function animate(rate) {
+				rate = rate || 6;
+				if ( rate < 0.01 ) rate = 0.01;
+				else if ( rate > 1000 ) rate = 1000;
+				var targ1 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
+				TweenMax.to(spt1.position, rate / 3, targ1);
+				TweenMax.to(spt1, rate / 2, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ1 } );
+
+				var targ2 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
+				TweenMax.to(spt2.position, rate, targ2);
+				TweenMax.to(spt2, rate / 3, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ2 } );
+
+				var targ3 = { x: ((Math.random() * 30) - 15), y: ((Math.random() * 10) + 15), z: ((Math.random() * 30) - 15) };
+				TweenMax.to(spt3.position, rate / 2, targ3);
+				TweenMax.to(spt3, rate, { angle: ( (Math.random() * 0.7) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ3 } );
+
+				setTimeout(function() { animate(rate); }, rate * 1000);
+			};
+
+			function render( /* time */ ) {
+				if ( lightHelper1 ) lightHelper1.update();
+				if ( lightHelper2 ) lightHelper2.update();
+				if ( lightHelper3 ) lightHelper3.update();
+				if ( spt1.shadowCameraHelper ) spt1.shadowCameraHelper.update();
+				if ( spt2.shadowCameraHelper ) spt2.shadowCameraHelper.update();
+				if ( spt3.shadowCameraHelper ) spt3.shadowCameraHelper.update();
+
+				rnd.render(scn, cam);
+
+				window.requestAnimationFrame(render);
+
+			};
+
+			function onDocumentClick( event ) {
+
+				event.preventDefault();
+
+				var rndDom = rnd.domElement;
+
+				if( event.type === 'mousedown' ) {
+
+					mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+
+					mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+
+				}
+				else {
+
+					mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
+
+					mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
+
+					if (mouseDown.distanceTo(mouse) < 0.0075) {
+
+						ray.setFromCamera( mouse, cam );
+
+						var found = ray.intersectObjects( [ mshBox, mshFloor ] );
+
+						if ( found.length > 0 ) {
+
+							if( event.ctrlKey === false ) randomColor( found[0].object );
+
+							else found[0].object.material.color.set( 0xffffff );
+
+							render();
+
+						}
+
+					}
+
+				}
+
+			}
+
+			function randomColor( target ) {
+
+				if ( target !== undefined ) {
+
+					if ( target.material !== undefined ) target = target.material;
+
+					if ( target.color !== undefined ) {
+
+						target.color.setHex( 0xffffff * Math.random() );
+
+					}
+				}
+
+			}
+
+			init();
+
+			render();
+
+			animate(4.5);
+
+		</script>
+	</body>
+</html>
