Clean up (#8908)

63def1e9 · WestLangley · Mr.doob · ec654585 · 63def1e9
隐藏空白更改
内联并排

Showing with 79 addition and 62 deletion

examples/webgl_lights_spotlights.html examples/webgl_lights_spotlights.html +79 -62

未找到文件。
--- a/examples/webgl_lights_spotlights.html
+++ b/examples/webgl_lights_spotlights.html
@@ -33,10 +33,9 @@
 	</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 />
+			Orbit Controls are available to navigate.<br />
 			Where the lights converge to make white light the shadows will appear as C M Y from light color pairing.
 		</div>

@@ -48,125 +47,143 @@
 		<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, 2000);
-			var orb = new THREE.OrbitControls(cam, rnd.domElement);
+			var renderer = new THREE.WebGLRenderer();
+
+			var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
+
+			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( { 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);
-			var mshBox = new THREE.Mesh(geoBox, matBox);
-			var amb = new THREE.AmbientLight(0x121422);
-			var spt1 = createSpotlight( 0xFF7F00 );
-			var spt2 = createSpotlight( 0x00FF7F );
-			var spt3 = createSpotlight( 0x7F00FF );
+			var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
+
+			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( 0x111111 );
+
+			var spotLight1 = createSpotlight( 0xFF7F00 );
+			var spotLight2 = createSpotlight( 0x00FF7F );
+			var spotLight3 = createSpotlight( 0x7F00FF );
+
 			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;
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;

-				cam.position.set(38, 20, -32);
+				camera.position.set( 46, 22, - 21 );

-				spt1.position.set(15, 40, 45);
-				spt2.position.set(0, 40, 35);
-				spt3.position.set(-15, 40, 45);
+				spotLight1.position.set( 15, 40, 45 );
+				spotLight2.position.set( 0, 40, 35 );
+				spotLight3.position.set( - 15, 40, 45 );

-				lightHelper1 = new THREE.SpotLightHelper( spt1 );
-				lightHelper2 = new THREE.SpotLightHelper( spt2 );
-				lightHelper3 = new THREE.SpotLightHelper( spt3 );
+				lightHelper1 = new THREE.SpotLightHelper( spotLight1 );
+				lightHelper2 = new THREE.SpotLightHelper( spotLight2 );
+				lightHelper3 = new THREE.SpotLightHelper( spotLight3 );

 				matFloor.color.set( 0x808080 );

 				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(0, 5, 0);
+				mshBox.position.set( 0, 5, 0 );

-				scn.add( cam);
-				scn.add( mshFloor );
-				scn.add( mshBox );
-				scn.add( amb );
-				scn.add( spt1, spt2, spt3 );
-				scn.add( lightHelper1, lightHelper2, lightHelper3 );
+				scene.add( mshFloor );
+				scene.add( mshBox );
+				scene.add( ambient );
+				scene.add( spotLight1, spotLight2, spotLight3 );
+				scene.add( lightHelper1, lightHelper2, lightHelper3 );

-				document.body.appendChild(rnd.domElement);
+				document.body.appendChild( renderer.domElement );
 				onResize();
-				window.addEventListener('resize', onResize, false);
+				window.addEventListener( 'resize', onResize, false );
+
+				controls.target.set( 0, 7, 0 );
+				controls.maxPolarAngle = Math.PI / 2;
+				controls.update();

-				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 );
+
 				newObj.castShadow = true;
 				newObj.angle = 0.3;
 				newObj.penumbra = 0.2;
 				newObj.decay = 2;
 				newObj.distance = 50;
+
 				newObj.shadow.mapSize.width = 1024;
 				newObj.shadow.mapSize.height = 1024;

 				return newObj;
+
 			}

 			function onResize() {
-				cam.aspect = window.innerWidth / window.innerHeight;
-				cam.updateProjectionMatrix();
-				rnd.setSize( window.innerWidth, window.innerHeight );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}

-			function animate(rate) {
+			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 targ1 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
+				TweenMax.to( spotLight1.position, rate / 3, targ1 );
+				TweenMax.to( spotLight1, rate / 2, { angle: ( ( Math.random() * 0.7 ) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ1 } );

-				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 } );
+				var targ2 = { x: ( ( Math.random() * 30 ) - 15 ), y: ( ( Math.random() * 10 ) + 15 ), z: ( ( Math.random() * 30 ) - 15 ) };
+				TweenMax.to( spotLight2.position, rate, targ2 );
+				TweenMax.to( spotLight2, 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( spotLight3.position, rate / 2, targ3 );
+				TweenMax.to( spotLight3, rate, { angle: ( ( Math.random() * 0.7 ) + 0.1 ), penumbra: ( Math.random() + 1 ), position: targ3 } );
+
+				setTimeout( function() {
+
+					animate( rate );
+
+				}, rate * 1000 );

-				setTimeout(function() { animate(rate); }, rate * 1000);
 			}

-			function render( /* time */ ) {
+			function render() {
+
 				if ( lightHelper1 ) lightHelper1.update();
 				if ( lightHelper2 ) lightHelper2.update();
 				if ( lightHelper3 ) lightHelper3.update();

-				rnd.render(scn, cam);
+				renderer.render( scene, camera );

-				requestAnimationFrame(render);
+				requestAnimationFrame( render );

 			}

 			init();
 			render();
-			animate(4.5);
+			animate( 4.5 );

 		</script>
 	</body>