Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Cleaned up tube extrude example.

alteredq 13 years ago
parent
f3fbacf43a
commit
87f6fde2a2
1 changed files with 160 additions and 163 deletions
Unified View Show Diff Stats
  1. 160 163
      examples/webgl_geometry_extrude_splines.html

+ 160 - 163
examples/webgl_geometry_extrude_splines.html
View File 

@@ -1,4 +1,3 @@
 
-
 
 <!doctype html>
 
 <!doctype html>
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
@@ -23,95 +22,98 @@
 
     <script src="js/Stats.js"></script>
 
     <script src="js/Stats.js"></script>
 
 
 
 
 
-    <script>
 
+	<script>
 
 
 
     // Lets define some curves
 
     // Lets define some curves
 
 
 
     // Formula from http://mathworld.wolfram.com/HeartCurve.html
 
     // Formula from http://mathworld.wolfram.com/HeartCurve.html
 
+
 
     THREE.HeartCurve = THREE.Curve.create(
 
     THREE.HeartCurve = THREE.Curve.create(
 
 
 
-      function(s) {
 
-        this.scale = (s === undefined) ? 5 : s ;
 
-      },
 
+		function ( s ) {
 
 
 
-      function(t) {
 
-          t *= 2 * Math.PI;
 
-          var tx = 16 * Math.pow(Math.sin(t), 3);
 
-              ty = 13 * Math.cos(t)
 
-                - 5 * Math.cos(2 * t)
 
-                - 2 * Math.cos(3 * t)
 
-                - Math.cos(4 * t ),
 
-              tz = 0;
 
+			this.scale = ( s === undefined ) ? 5 : s;
 
 
 
-          return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+		},
 
 
 
-      }
 
+		function ( t ) {
 
 
 
-    );
 
+			t *= 2 * Math.PI;
 
+			var tx = 16 * Math.pow( Math.sin( t ), 3 );
 
+				ty = 13 * Math.cos( t )
 
+					- 5 * Math.cos( 2 * t )
 
+					- 2 * Math.cos( 3 * t )
 
+					- Math.cos( 4 * t ),
 
+				tz = 0;
 
 
 
+			return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
+
 
+		}
 
+
 
+    );
 
 
 
 
 
     // Viviani's Curve
 
     // Viviani's Curve
 
     // http://en.wikipedia.org/wiki/Viviani%27s_curve
 
     // http://en.wikipedia.org/wiki/Viviani%27s_curve
 
+
 
     THREE.VivianiCurve = THREE.Curve.create(
 
     THREE.VivianiCurve = THREE.Curve.create(
 
 
 
-      function(radius) {
 
+		function ( radius ) {
 
 
 
-          this.radius = radius;
 
-      },
 
+			this.radius = radius;
 
 
 
-      function(t) {
 
-          t = t * 4 * Math.PI; // Normalized to 0..1
 
-          var a = this.radius / 2;
 
-          var tx = a * (1 + Math.cos(t)),
 
-              ty = a * Math.sin(t),
 
-              tz = 2 * a * Math.sin(t / 2);
 
+		},
 
 
 
-          return new THREE.Vector3(tx, ty, tz);
 
+		function ( t ) {
 
 
 
-      }
 
+			t = t * 4 * Math.PI; // Normalized to 0..1
 
+			var a = this.radius / 2;
 
+			var tx = a * ( 1 + Math.cos( t ) ),
 
+				ty = a * Math.sin( t ),
 
+				tz = 2 * a * Math.sin( t / 2 );
 
 
 
-    );
 
+			return new THREE.Vector3( tx, ty, tz );
 
 
 
+		}
 
+
 
+    );
 
 
 
     THREE.KnotCurve = THREE.Curve.create(
 
     THREE.KnotCurve = THREE.Curve.create(
 
 
 
-    function() {
 
+		function () {},
 
 
 
-    },
 
+		function ( t ) {
 
 
 
-    function(t) {
 
-        t *= 2 * Math.PI;
 
-        
-        var R = 10;
 
-        var s = 50;
 
-        var tx = s * Math.sin(t),
 
-            ty = Math.cos(t) * (R + s * Math.cos(t)),
 
-            tz = Math.sin(t) * (R + s * Math.cos(t));
 
-        
-        return new THREE.Vector3(tx, ty, tz);
 
+			t *= 2 * Math.PI;
 
 
 
-    }
 
+			var R = 10;
 
+			var s = 50;
 
+			var tx = s * Math.sin( t ),
 
+				ty = Math.cos( t ) * ( R + s * Math.cos( t ) ),
 
+				tz = Math.sin( t ) * ( R + s * Math.cos( t ) );
 
+
 
+			return new THREE.Vector3( tx, ty, tz );
 
+
 
+		}
 
 
 
     );
 
     );
 
 
 
     THREE.HelixCurve = THREE.Curve.create(
 
     THREE.HelixCurve = THREE.Curve.create(
 
 
 
-    function() {
 
+		function () {},
 
 
 
-    },
 
+		function ( t ) {
 
 
 
-    function(t) {
 
-        var a = 30; // radius
 
-        var b = 150; //height
 
-        var t2 = 2 * Math.PI * t * b / 30;
 
-        var tx = Math.cos(t2) * a,
 
-            ty = Math.sin(t2) * a,
 
-            tz = b * t;
 
+			var a = 30; // radius
 
+			var b = 150; //height
 
+			var t2 = 2 * Math.PI * t * b / 30;
 
+			var tx = Math.cos( t2 ) * a,
 
+				ty = Math.sin( t2 ) * a,
 
+				tz = b * t;
 
 
 
-        return new THREE.Vector3(tx, ty, tz);
 
+			return new THREE.Vector3( tx, ty, tz );
 
 
 
-    }
 
+		}
 
 
 
     );
 
     );
 
 
 
@@ -135,156 +137,150 @@
 
 
 
     function init() {
 
     function init() {
 
 
 
-      container = document.createElement('div');
 
-      document.body.appendChild(container);
 
-
 
-      var info = document.createElement('div');
 
-      info.style.position = 'absolute';
 
-      info.style.top = '10px';
 
-      info.style.width = '100%';
 
-      info.style.textAlign = 'center';
 
-      info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
 
-      container.appendChild(info);
 
-
 
-      scene = new THREE.Scene();
 
-
 
-      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
 
-      camera.position.set(0, 50, 500);
 
-      scene.add(camera);
 
-
 
-      var light = new THREE.DirectionalLight(0xffffff);
 
-      light.position.set(0, 0, 1);
 
-      scene.add(light);
 
-
 
-      parent = new THREE.Object3D();
 
-      parent.position.y = 50;
 
-      scene.add(parent);
 
-
 
-      function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
 
-
 
-          // 3d shape
 
-          var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshLambertMaterial({
 
-              color: color
 
-          }), new THREE.MeshBasicMaterial({
 
-              color: 0x000000,
 
-              wireframe: true,
 
-              transparent: true
 
-          })]);
 
-
 
-          if (geometry.debug) mesh.add(geometry.debug);
 
-          
-          mesh.position.set(x, y, z - 75);
 
-          mesh.rotation.set(rx, ry, rz);
 
-          mesh.scale.set(s, s, s);
 
-          parent.add(mesh);
 
+		container = document.createElement( 'div' );
 
+		document.body.appendChild( container );
 
 
 
-      }
 
+		var info = document.createElement('div');
 
+		info.style.position = 'absolute';
 
+		info.style.top = '10px';
 
+		info.style.width = '100%';
 
+		info.style.textAlign = 'center';
 
+		info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
 
+		container.appendChild(info);
 
+
 
+		scene = new THREE.Scene();
 
+
 
+		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
+		camera.position.set( 0, 50, 500 );
 
+		scene.add( camera );
 
+
 
+		var light = new THREE.DirectionalLight( 0xffffff );
 
+		light.position.set( 0, 0, 1 );
 
+		scene.add( light );
 
+
 
+		parent = new THREE.Object3D();
 
+		parent.position.y = 130;
 
+		scene.add( parent );
 
+
 
+		function addGeometry( geometry, color, x, y, z, rx, ry, rz, s ) {
 
+
 
+			// 3d shape
 
+
 
+			var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
 
+				new THREE.MeshLambertMaterial( { color: color }),
 
+				new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
+			]);
 
 
 
-      
-      // var extrudePath = new THREE.SplineCurve3([
 
-      //     new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10), new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10), new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30), new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30), new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10),
 
+			if ( geometry.debug ) mesh.add( geometry.debug );
 
 
 
-      //     new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10), new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10), new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10), new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10), new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0), new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)]);
 
+			mesh.position.set( x, y, z - 75 );
 
+			mesh.rotation.set( rx, ry, rz );
 
+			mesh.scale.set( s, s, s );
 
+			parent.add( mesh );
 
 
 
-      var extrudePath = new THREE.HeartCurve(3.5);
 
-      // var extrudePath = new THREE.VivianiCurve(70);
 
-      // var extrudePath = new THREE.KnotCurve();
 
-      // extrudePath = new THREE.HelixCurve();
 
-    
-      // var extrudePath = new THREE.ClosedSplineCurve3([
 
-      //   new THREE.Vector3(0, -40, -40),
 
-      //   new THREE.Vector3(0, 40, -40),
 
-      //   new THREE.Vector3(0, 140, -40),
 
-      //   new THREE.Vector3(0, 40, 40),
 
-      //   new THREE.Vector3(0, -40, 40),
 
-      // ]);
 
-      
+		}
 
 
 
-      var tube = new THREE.TubeGeometry(5, 100, 10, extrudePath, true);
 
-      
+		// var extrudePath = new THREE.SplineCurve3([
 
+		//     new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10), new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10), new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30), new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30), new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10),
 
 
 
-      addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 3);
 
+		//     new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10), new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10), new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10), new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10), new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0), new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)]);
 
 
 
+		var extrudePath = new THREE.HeartCurve( 3.5 );
 
+		// var extrudePath = new THREE.VivianiCurve(70);
 
+		// var extrudePath = new THREE.KnotCurve();
 
+		// extrudePath = new THREE.HelixCurve();
 
 
 
-      //
 
-      renderer = new THREE.WebGLRenderer({
 
-          antialias: true
 
-      });
 
-      renderer.setSize(window.innerWidth, window.innerHeight);
 
+		// var extrudePath = new THREE.ClosedSplineCurve3([
 
+		//   new THREE.Vector3(0, -40, -40),
 
+		//   new THREE.Vector3(0, 40, -40),
 
+		//   new THREE.Vector3(0, 140, -40),
 
+		//   new THREE.Vector3(0, 40, 40),
 
+		//   new THREE.Vector3(0, -40, 40),
 
+		// ]);
 
 
 
-      container.appendChild(renderer.domElement);
 
 
 
-      stats = new Stats();
 
-      stats.domElement.style.position = 'absolute';
 
-      stats.domElement.style.top = '0px';
 
-      container.appendChild(stats.domElement);
 
+		var tube = new THREE.TubeGeometry( 5, 100, 10, extrudePath, true );
 
 
 
-      document.addEventListener('mousedown', onDocumentMouseDown, false);
 
-      document.addEventListener('touchstart', onDocumentTouchStart, false);
 
-      document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+		addGeometry( tube, 0xff1100, 0, -80, 0, 0, 0, 0, 3 );
 
+
 
+		//
 
+
 
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+		renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+		container.appendChild( renderer.domElement );
 
+
 
+		stats = new Stats();
 
+		stats.domElement.style.position = 'absolute';
 
+		stats.domElement.style.top = '0px';
 
+		container.appendChild( stats.domElement );
 
+
 
+		document.addEventListener('mousedown', onDocumentMouseDown, false);
 
+		document.addEventListener('touchstart', onDocumentTouchStart, false);
 
+		document.addEventListener('touchmove', onDocumentTouchMove, false);
 
 
 
     }
 
     }
 
 
 
     //
 
     //
 
 
 
-    function onDocumentMouseDown(event) {
 
+    function onDocumentMouseDown( event ) {
 
 
 
-      event.preventDefault();
 
+		event.preventDefault();
 
 
 
-      document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.addEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.addEventListener('mouseout', onDocumentMouseOut, false);
 
+		document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+		document.addEventListener('mouseup', onDocumentMouseUp, false);
 
+		document.addEventListener('mouseout', onDocumentMouseOut, false);
 
 
 
-      mouseXOnMouseDown = event.clientX - windowHalfX;
 
-      targetRotationOnMouseDown = targetRotation;
 
+		mouseXOnMouseDown = event.clientX - windowHalfX;
 
+		targetRotationOnMouseDown = targetRotation;
 
 
 
     }
 
     }
 
 
 
-    function onDocumentMouseMove(event) {
 
+    function onDocumentMouseMove( event ) {
 
 
 
-      mouseX = event.clientX - windowHalfX;
 
+		mouseX = event.clientX - windowHalfX;
 
 
 
-      targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
+		targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
 
 
     }
 
     }
 
 
 
-    function onDocumentMouseUp(event) {
 
+    function onDocumentMouseUp( event ) {
 
 
 
-      document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
+		document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
+		document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
+		document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 
 
     }
 
     }
 
 
 
-    function onDocumentMouseOut(event) {
 
+	function onDocumentMouseOut( event ) {
 
 
 
-      document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
+		document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
+		document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
+		document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 
 
     }
 
     }
 
 
 
-    function onDocumentTouchStart(event) {
 
+    function onDocumentTouchStart( event ) {
 
 
 
-      if (event.touches.length == 1) {
 
+		if ( event.touches.length == 1 ) {
 
 
 
-          event.preventDefault();
 
+			event.preventDefault();
 
 
 
-          mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
-          targetRotationOnMouseDown = targetRotation;
 
+			mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
 
+			targetRotationOnMouseDown = targetRotation;
 
 
 
-      }
 
+		}
 
 
 
     }
 
     }
 
 
 
-    function onDocumentTouchMove(event) {
 
+    function onDocumentTouchMove( event ) {
 
 
 
-      if (event.touches.length == 1) {
 
+		if ( event.touches.length == 1 ) {
 
 
 
-          event.preventDefault();
 
+			event.preventDefault();
 
 
 
-          mouseX = event.touches[0].pageX - windowHalfX;
 
-          targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
+			mouseX = event.touches[0].pageX - windowHalfX;
 
+			targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
 
 
 
       }
 
       }
 
 
 
@@ -294,20 +290,21 @@
 
 
 
     function animate() {
 
     function animate() {
 
 
 
-      requestAnimationFrame(animate);
 
+		requestAnimationFrame(animate);
 
 
 
-      render();
 
-      stats.update();
 
+		render();
 
+		stats.update();
 
 
 
     }
 
     }
 
 
 
     function render() {
 
     function render() {
 
 
 
+      parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 
+      renderer.render( scene, camera );
 
 
 
-      parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
 
-      renderer.render(scene, camera);
 
+    }
 
 
 
-    }</script>
 
+	</script>
 
 
 
   </body>
 
   </body>
 
 </html>
 
 </html>