Merge pull request #11284 from WestLangley/dev-spotlight

Spotlight Example Clean Up

examples/webgl_lights_spotlight.html

@@ -38,86 +38,89 @@
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+
+		<script src="js/libs/dat.gui.min.js"></script>
+
 		<script src="js/Detector.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			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 matFloor = new THREE.MeshPhongMaterial( { dithering: true } );
-			var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
-
-			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 renderer, scene, camera;
 
-			var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+			var spotLight, lightHelper, shadowCameraHelper;
 
-			var spotLight = new THREE.SpotLight( 0xffffff, 1 );
-			var lightHelper;
-
-			var gui, guiElements, param = { color: '0xffffff' };
+			var gui;
 
 			function init() {
 
+				renderer = new THREE.WebGLRenderer();
+				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.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 65, 8, - 10 );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render );
+				controls.minDistance = 20;
+				controls.maxDistance = 500;
+				controls.enablePan = false;
+
+				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				scene.add( ambient );
+
+				spotLight = new THREE.SpotLight( 0xffffff, 1 );
 				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.castShadow = true;
 				spotLight.shadow.mapSize.width = 1024;
 				spotLight.shadow.mapSize.height = 1024;
-				spotLight.shadow.camera.near = 1;
+				spotLight.shadow.camera.near = 10;
 				spotLight.shadow.camera.far = 200;
+				scene.add( spotLight );
 
 				lightHelper = new THREE.SpotLightHelper( spotLight );
+				scene.add( lightHelper );
 
-				matFloor.color.set( 0x808080 );
+				shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
+				scene.add( shadowCameraHelper );
 
-				mshFloor.receiveShadow = true;
-				mshFloor.position.set( 0, - 0.05, 0 );
+				scene.add( new THREE.AxisHelper( 10 ) );
 
-				mshBox.castShadow = true;
-				mshBox.position.set( 40, 1.8, 0 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
 
-				scene.add( camera );
-				scene.add( mshFloor );
-				scene.add( mshBox );
-				scene.add( ambient );
-				scene.add( spotLight );
-				scene.add( new THREE.AxisHelper( 10 ) );
-				scene.add( lightHelper );
+				var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
 
-				document.body.appendChild( renderer.domElement );
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.set( 0, - 1, 0 );
+				mesh.receiveShadow = true;
+				scene.add( mesh );
 
-				controls.addEventListener( 'change', render );
-				controls.minDistance = 20;
-				controls.maxDistance = 500;
-				controls.maxPolarAngle = Math.PI / 2;
-				controls.enablePan = false;
-				controls.target.copy( mshBox.position );
+				var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
+
+				var geometry = new THREE.BoxGeometry( 3, 1, 2 );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.set( 40, 2, 0 );
+				mesh.castShadow = true;
+				scene.add( mesh );
+
+				controls.target.copy( mesh.position );
 				controls.update();
 
 				window.addEventListener( 'resize', onResize, false );
@@ -126,109 +129,80 @@
 
 			function onResize() {
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				camera.aspect = ( window.innerWidth / window.innerHeight );
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function render() {
 
-				lightHelper.update(); // required
-				renderer.render( scene, camera );
-
-			}
+				lightHelper.update();
 
-			function clearGui() {
+				shadowCameraHelper.update();
 
-				if ( gui ) gui.destroy();
-
-				gui = new dat.GUI();
-
-				gui.open();
+				renderer.render( scene, camera );
 
 			}
 
 			function buildGui() {
 
-				clearGui();
+				gui = new dat.GUI();
 
-				addGui( 'light color', spotLight.color.getHex(), function( val ) {
+				var params = {
+					'light color': spotLight.color.getHex(),
+					intensity: spotLight.intensity,
+					distance: spotLight.distance,
+					angle: spotLight.angle,
+					penumbra: spotLight.penumbra,
+					decay: spotLight.decay
+				}
+
+				gui.addColor( params, 'light color' ).onChange( function ( val ) {
 
 					spotLight.color.setHex( val );
 					render();
 
-				}, true );
+				} );
 
-				addGui( 'intensity', spotLight.intensity, function( val ) {
+				gui.add( params, 'intensity', 0, 2 ).onChange( function ( val ) {
 
 					spotLight.intensity = val;
 					render();
 
-				}, false, 0, 2 );
+				} );
+
 
-				addGui( 'distance', spotLight.distance, function( val ) {
+				gui.add( params, 'distance', 50, 200 ).onChange( function ( val ) {
 
 					spotLight.distance = val;
 					render();
 
-				}, false, 0, 200 );
+				} );
 
-				addGui( 'angle', spotLight.angle, function( val ) {
+				gui.add( params, 'angle', 0, Math.PI / 3 ).onChange( function ( val ) {
 
 					spotLight.angle = val;
 					render();
 
-				}, false, 0, Math.PI / 3 );
+				} );
 
-				addGui( 'penumbra', spotLight.penumbra, function( val ) {
+				gui.add( params, 'penumbra', 0, 1 ).onChange( function ( val ) {
 
 					spotLight.penumbra = val;
 					render();
 
-				}, false, 0, 1 );
+				} );
 
-				addGui( 'decay', spotLight.decay, function( val ) {
+				gui.add( params, 'decay', 1, 2 ).onChange( function ( val ) {
 
 					spotLight.decay = val;
 					render();
 
-				}, false, 1, 2 );
-
-			}
-
-			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;
+				gui.open();
 
 			}
 
@@ -239,5 +213,7 @@
 			render();
 
 		</script>
+
 	</body>
+
 </html>