Simplified webgl_lights_spotlights example.

examples/webgl_lights_spotlights.html

@@ -53,12 +53,12 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var rnd = new THREE.WebGLRenderer();
-			var cam = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 20000);
+			var cam = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 2000);
 			var orb = new THREE.OrbitControls(cam, rnd.domElement);
 
 			var scn = new THREE.Scene();
 			var matFloor = new THREE.MeshPhongMaterial();
-			var matBox = new THREE.MeshPhongMaterial();
+			var matBox = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
 			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);
@@ -78,9 +78,6 @@
 				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);
 
@@ -97,35 +94,26 @@
 				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( cam);
+				scn.add( mshFloor );
+				scn.add( mshBox );
+				scn.add( amb );
+				scn.add( spt1, spt2, spt3 );
 				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( color ) {
 				var newObj = new THREE.SpotLight( color, 2 );
@@ -138,13 +126,13 @@
 				newObj.shadow.mapSize.height = 1024;
 
 				return newObj;
-			};
+			}
 
 			function onResize() {
-				rnd.setSize(window.innerWidth, window.innerHeight);
-				cam.aspect = (window.innerWidth / window.innerHeight);
+				cam.aspect = window.innerWidth / window.innerHeight;
 				cam.updateProjectionMatrix();
-			};
+				rnd.setSize( window.innerWidth, window.innerHeight );
+			}
 
 			function animate(rate) {
 				rate = rate || 6;
@@ -163,7 +151,7 @@
 				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();
@@ -172,70 +160,12 @@
 
 				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() );
-
-					}
-				}
+				requestAnimationFrame(render);
 
 			}
 
 			init();
-
 			render();
-
 			animate(4.5);
 
 		</script>