Browse Source

Cleaning webgl_geometry_extrude_splines a bit.

Mr.doob 13 years ago
parent
commit
b17defa8f0
1 changed files with 32 additions and 45 deletions
  1. 32 45
      examples/webgl_geometry_extrude_splines.html

+ 32 - 45
examples/webgl_geometry_extrude_splines.html

@@ -156,7 +156,7 @@
 
 
 			if ( toggle ) {
 			if ( toggle ) {
 
 
-				animation = !animation;
+				animation = animation === false;
 				document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');
 				document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');
 
 
 			}
 			}
@@ -199,9 +199,6 @@
 			//
 			//
 
 
 			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
 			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
-			splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
-			cameraHelper = new THREE.CameraHelper(splineCamera);
-
 			camera.position.set(0, 50, 500);
 			camera.position.set(0, 50, 500);
 
 
 			scene = new THREE.Scene();
 			scene = new THREE.Scene();
@@ -212,39 +209,39 @@
 
 
 			parent = new THREE.Object3D();
 			parent = new THREE.Object3D();
 			parent.position.y = 100;
 			parent.position.y = 100;
-			scene.add(parent);
+			scene.add( parent );
+
+			splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
+			parent.add(splineCamera);
+
+			cameraHelper = new THREE.CameraHelper(splineCamera);
+			scene.add(cameraHelper);
 
 
 			addTube();
 			addTube();
 
 
 			// Debug point
 			// Debug point
-			cameraEye = new THREE.Mesh(
-				new THREE.SphereGeometry( 5 ),
-				new THREE.MeshBasicMaterial( { color: 0xdddddd } )
-			);
-
-			cameraHelper.visible = showCameraHelper;
-			cameraEye.visible = showCameraHelper;
 
 
+			cameraEye = new THREE.Mesh( new THREE.SphereGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
 			parent.add(cameraEye);
 			parent.add(cameraEye);
 
 
-			cameraHelper.scale.multiplyScalar( 0.1 );
-			splineCamera.add(cameraHelper);
-			parent.add(splineCamera);
+			cameraHelper.visible = showCameraHelper;
+			cameraEye.visible = showCameraHelper;
 
 
 			//
 			//
-			renderer = new THREE.WebGLRenderer({ antialias: true } );
-			renderer.setSize(window.innerWidth, window.innerHeight);
 
 
-			container.appendChild(renderer.domElement);
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+
+			container.appendChild( renderer.domElement );
 
 
 			stats = new Stats();
 			stats = new Stats();
 			stats.domElement.style.position = 'absolute';
 			stats.domElement.style.position = 'absolute';
 			stats.domElement.style.top = '0px';
 			stats.domElement.style.top = '0px';
-			container.appendChild(stats.domElement);
+			container.appendChild( stats.domElement );
 
 
-			renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
-			renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
-			renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);
+			renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
+			renderer.domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
+			renderer.domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 
 			//
 			//
 
 
@@ -270,9 +267,9 @@
 
 
 			event.preventDefault();
 			event.preventDefault();
 
 
-			renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
-			renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
-			renderer.domElement.addEventListener('mouseout', onDocumentMouseOut, false);
+			renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
+			renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
+			renderer.domElement.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
 
 			mouseXOnMouseDown = event.clientX - windowHalfX;
 			mouseXOnMouseDown = event.clientX - windowHalfX;
 			targetRotationOnMouseDown = targetRotation;
 			targetRotationOnMouseDown = targetRotation;
@@ -289,17 +286,17 @@
 
 
 		function onDocumentMouseUp(event) {
 		function onDocumentMouseUp(event) {
 
 
-			renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
-			renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
-			renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);
+			renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+			renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+			renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
 
 		}
 		}
 
 
 		function onDocumentMouseOut(event) {
 		function onDocumentMouseOut(event) {
 
 
-			renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
-			renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
-			renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);
+			renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+			renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+			renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
 
 		}
 		}
 
 
@@ -309,7 +306,7 @@
 
 
 				event.preventDefault();
 				event.preventDefault();
 
 
-				mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
+				mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
 				targetRotationOnMouseDown = targetRotation;
 
 
 			}
 			}
@@ -322,7 +319,7 @@
 
 
 				event.preventDefault();
 				event.preventDefault();
 
 
-				mouseX = event.touches[0].pageX - windowHalfX;
+				mouseX = event.touches[ 0 ].pageX - windowHalfX;
 				targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 				targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
 
 			}
 			}
@@ -387,19 +384,9 @@
 
 
 			cameraHelper.update();
 			cameraHelper.update();
 
 
-			parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
-
-			if (animation) {
-
-				renderer.render(scene, splineCamera);
-
-			} else {
-
-				renderer.render(scene, camera);
-
-			}
-
+			parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 
 
+			renderer.render( scene, animation === true ? splineCamera : camera );
 
 
 		}
 		}
 	</script>
 	</script>