diff --git a/examples/js/materials/ShadowMaterial.js b/examples/js/materials/ShadowMaterial.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e8f7c6b74b02a365e33c6861323c411e2a57f38
--- /dev/null
+++ b/examples/js/materials/ShadowMaterial.js
@@ -0,0 +1,55 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.ShadowMaterial = function () {
+
+	THREE.ShaderMaterial.call( this, {
+		uniforms: THREE.UniformsUtils.merge( [
+			THREE.UniformsLib[ "ambient" ],
+			THREE.UniformsLib[ "lights" ],
+			{
+				opacity:  { type: 'f', value: 1.0 }
+			}
+		] ),
+		vertexShader: [
+			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
+			"void main() {",
+				THREE.ShaderChunk[ "begin_vertex" ],
+				THREE.ShaderChunk[ "project_vertex" ],
+				THREE.ShaderChunk[ "worldpos_vertex" ],
+				THREE.ShaderChunk[ "shadowmap_vertex" ],
+			"}"
+		].join( '\n' ),
+		fragmentShader: [
+			THREE.ShaderChunk[ "common" ],
+			THREE.ShaderChunk[ "bsdfs" ],
+			THREE.ShaderChunk[ "lights_pars" ],
+			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
+			THREE.ShaderChunk[ "shadowmask_pars_fragment" ],
+			"uniform float opacity;",
+			"void main() {",
+			"	gl_FragColor = vec4( 0.0, 0.0, 0.0, opacity - getShadowMask() );",
+			"}"
+		].join( '\n' )
+	} );
+
+	this.lights = true;
+	this.transparent = true;
+
+	Object.defineProperties( this, {
+		opacity: {
+			enumerable: true,
+			get: function () {
+				return this.uniforms.opacity.value;
+			},
+			set: function ( value ) {
+				this.uniforms.opacity.value = value;
+			}
+		}
+	} );
+
+};
+
+THREE.ShadowMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
+THREE.ShadowMaterial.prototype.constructor = THREE.ShadowMaterial;
diff --git a/examples/webgl_geometry_spline_editor.html b/examples/webgl_geometry_spline_editor.html
index c3995a624f41f12d274e2fb5cb79079e24a8913a..57d27c4d443e2777c6552b6a98b4e50deef686b5 100644
--- a/examples/webgl_geometry_spline_editor.html
+++ b/examples/webgl_geometry_spline_editor.html
@@ -19,6 +19,7 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/controls/TransformControls.js"></script>
 		<script src="js/controls/DragControls.js"></script>
+		<script src="js/materials/ShadowMaterial.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -70,7 +71,7 @@
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
 				light.shadowCameraNear = 200;
-				light.shadowCameraFar = camera.far;
+				light.shadowCameraFar = 2000;
 				light.shadowCameraFov = 70;
 				light.shadowBias = -0.000222;
 				light.shadowMapWidth = 1024;
@@ -78,9 +79,12 @@
 				scene.add( light );
 				spotlight = light;
 
+				scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+
 				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
-				var planeMaterial = new THREE.MeshBasicMaterial( { color: 0xeeeeee } );
+				var planeMaterial = new THREE.ShadowMaterial();
+				planeMaterial.opacity = 0.2;
 
 				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
 				plane.position.y = -200;