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

Merge remote-tracking branch 'remotes/mrdoob/dev' into dev

alteredq 13 years ago
parent
7230ffa2fc 68b4058635
commit
4754c341d5
1 changed files with 330 additions and 348 deletions
Split View Show Diff Stats
  1. 330 348
      examples/webgl_geometry_extrude_splines.html

+ 330 - 348
examples/webgl_geometry_extrude_splines.html
View File 

@@ -1,559 +1,541 @@
 
-
 
 <!doctype html>
 
 <html lang="en">
 
-  <head>
 
-    <title>three.js webgl - geometry - shapes</title>
 
-    <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-    <style>
 
-      body {
 
-        font-family: Monospace;
 
-        background-color: #f0f0f0;
 
-        margin: 0px;
 
-        overflow: hidden;
 
-      }
 
-    </style>
 
-  </head>
 
-  <body>
 
-    <canvas id="debug" style="position:absolute; left:100px"></canvas>
 
-
 
-    <script src="../build/Three.js"></script>
 
-    <script src="../src/extras/core/Curve.js"></script>
 
-    <script src="../src/extras/geometries/TubeGeometry.js"></script>
 
-    <script src="js/Stats.js"></script>
 
-
 
+	<head>
 
+		<title>three.js webgl - geometry - shapes</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<canvas id="debug" style="position:absolute; left:100px"></canvas>
 
 
-    <script>
 
+		<script src="../build/Three.js"></script>
 
+		<script src="../src/extras/core/Curve.js"></script>
 
+		<script src="../src/extras/geometries/TubeGeometry.js"></script>
 
+		<script src="js/Stats.js"></script>
 
 
-    // Lets define some curves
 
+		<script>
 
 
-    // Formula from http://mathworld.wolfram.com/HeartCurve.html
 
+			// Lets define some curves
 
 
-    THREE.HeartCurve = THREE.Curve.create(
 
+			// Formula from http://mathworld.wolfram.com/HeartCurve.html
 
 
-      function ( s ) {
 
+			THREE.HeartCurve = THREE.Curve.create(
 
 
-        this.scale = (s === undefined) ? 5 : s;
 
+				function ( s ) {
 
 
-      },
 
+					this.scale = ( s === undefined ) ? 5 : s;
 
 
-      function ( t ) {
 
+				},
 
 
-          t *= 2 * Math.PI;
 
+				function ( t ) {
 
 
-          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;
 
+					t *= 2 * Math.PI;
 
 
-          return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+					var tx = 16 * Math.pow( Math.sin( t ), 3 );
 
+					var ty = 13 * Math.cos( t )
 
+							- 5 * Math.cos( 2 * t )
 
+							- 2 * Math.cos( 3 * t )
 
+							- Math.cos( 4 * t );
 
+					var tz = 0;
 
 
-      }
 
+					return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
 
-    );
 
+				}
 
 
+			);
 
 
 
-    // Viviani's Curve
 
-    // http://en.wikipedia.org/wiki/Viviani%27s_curve
 
 
-    THREE.VivianiCurve = THREE.Curve.create(
 
+			// Viviani's Curve
 
+			// http://en.wikipedia.org/wiki/Viviani%27s_curve
 
 
-      function( radius ) {
 
+			THREE.VivianiCurve = THREE.Curve.create(
 
 
-          this.radius = radius;
 
-      },
 
+				function ( radius ) {
 
 
-      function( t ) {
 
+					this.radius = radius;
 
 
-          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 ) );
 
+					var ty = a * Math.sin( t );
 
+					var tz = 2 * a * Math.sin( t / 2 );
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz );
 
 
+				}
 
 
-    THREE.KnotCurve = THREE.Curve.create(
 
+			);
 
 
-    function() {
 
 
-    },
 
+			THREE.KnotCurve = THREE.Curve.create(
 
 
-    function(t) {
 
+				function () {
 
 
-        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));
 
+				function ( t ) {
 
 
-        return new THREE.Vector3(tx, ty, tz);
 
+					t *= 2 * Math.PI;
 
 
-    }
 
+					var R = 10;
 
+					var s = 50;
 
+					var tx = s * Math.sin( t );
 
+					var ty = Math.cos( t ) * ( R + s * Math.cos( t ) );
 
+					var tz = Math.sin( t ) * ( R + s * Math.cos( t ) );
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz );
 
 
-    THREE.HelixCurve = THREE.Curve.create(
 
+				}
 
 
-    function() {
 
+			);
 
 
-    },
 
+			THREE.HelixCurve = THREE.Curve.create(
 
 
-    function(t) {
 
+				function () {
 
 
-        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);
 
+				function ( t ) {
 
 
-    }
 
+					var a = 30; // radius
 
+					var b = 150; //height
 
+					var t2 = 2 * Math.PI * t * b / 30;
 
+					var tx = Math.cos( t2 ) * a;
 
+					var ty = Math.sin( t2 ) * a;
 
+					var tz = b * t;
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz );
 
 
-    // Replacement for TorusKnotGeometry?
 
+				}
 
 
-    THREE.TrefoilKnot = THREE.Curve.create(
 
+			);
 
 
-    function(s) {
 
+			// Replacement for TorusKnotGeometry?
 
 
-      this.scale = (s === undefined) ? 10 : s;
 
+			THREE.TrefoilKnot = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 10 : s;
 
 
-        t *= Math.PI * 2;
 
-        var tx = (2 + Math.cos(3 * t)) * Math.cos(2 * t),
 
-        ty = (2 + Math.cos(3* t)) * Math.sin(2 * t),
 
-        tz = Math.sin(3 * t);
 
+				},
 
 
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					t *= Math.PI * 2;
 
+					var tx = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t );
 
+					var ty = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t );
 
+					var tz = Math.sin( 3 * t );
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
 
-    // Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
 
+				}
 
 
-    THREE.TorusKnot = THREE.Curve.create(
 
+			);
 
 
-    function(s) {
 
+			// Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
 
 
-      this.scale = (s === undefined) ? 10 : s;
 
+			THREE.TorusKnot = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 10 : s;
 
 
-      var p = 3, q = 4;
 
-        t *= Math.PI * 2;
 
-        var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
 
-        ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
 
-        tz = Math.sin(q * t);
 
+				},
 
 
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					t *= Math.PI * 2;
 
+					var p = 3, q = 4;
 
+					var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
 
+					var ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
 
+					var tz = Math.sin( q * t );
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
 
+				}
 
 
-    THREE.CinquefoilKnot = THREE.Curve.create(
 
+			);
 
 
-    function(s) {
 
 
-      this.scale = (s === undefined) ? 10 : s;
 
+			THREE.CinquefoilKnot = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 10 : s;
 
 
-      var p = 2, q = 5;
 
-        t *= Math.PI * 2;
 
-        var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
 
-        ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
 
-        tz = Math.sin(q * t);
 
+				},
 
 
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					t *= Math.PI * 2;
 
+					var p = 2, q = 5;
 
+					var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
 
+					var ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
 
+					var tz = Math.sin( q * t );
 
 
-    );
 
+					return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
 
+				}
 
 
-    THREE.TrefoilPolynomialKnot = THREE.Curve.create(
 
+			);
 
 
-    function(s) {
 
 
-      this.scale = (s === undefined) ? 10 : s;
 
+			THREE.TrefoilPolynomialKnot = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 10 : s;
 
 
-        t = t * 4 - 2;
 
-        var tx = Math.pow(t, 3) - 3 * t,
 
-        ty = Math.pow(t, 4) - 4 * t * t,
 
-        tz = 1/ 5 * Math.pow(t, 5) - 2 * t;
 
+				},
 
 
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					t = t * 4 - 2;
 
+					var tx = Math.pow( t, 3 ) - 3 * t;
 
+					var ty = Math.pow( t, 4 ) - 4 * t * t;
 
+					var tz = 1/ 5 * Math.pow( t, 5 ) - 2 * t;
 
 
-    );
 
+					return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
 
-    var sin = Math.sin, pow = Math.pow, cos = Math.cos;
 
-    // var scaleTo = function(x, y) {
 
-    //   var r = y - x;
 
-    //   return function(t) {
 
-    //     t * r + x;
 
-    //   };
 
-    // }
 
+				}
 
 
-    var scale = function(x, y, t) {
 
+			);
 
 
-      var r = y - x;
 
-      return t * r + x;
 
+			var sin = Math.sin, pow = Math.pow, cos = Math.cos;
 
+			var scale = function ( x, y, t ) {
 
 
-    }
 
+				var r = y - x;
 
+				return t * r + x;
 
 
-    THREE.FigureEightPolynomialKnot = THREE.Curve.create(
 
+			}
 
 
-    function(s) {
 
+			THREE.FigureEightPolynomialKnot = THREE.Curve.create(
 
 
-      this.scale = (s === undefined) ? 1 : s;
 
+				function ( s ) {
 
 
-    },
 
+					this.scale = ( s === undefined ) ? 1 : s;
 
 
-    function(t) {
 
+				},
 
 
-        t = scale(-4,4, t);
 
-        var tx = 2 / 5 * t * (t * t - 7) * (t * t - 10),
 
-        ty = pow(t, 4) - 13 * t * t,
 
-        tz = 1/10 * t * (t * t - 4) * (t * t - 9) * (t * t - 12);
 
+				function ( t ) {
 
 
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
+					t = scale( -4, 4, t );
 
+					var tx = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 );
 
+					var ty = pow( t, 4 ) - 13 * t * t;
 
+					var tz = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
 
 
-    }
 
+					return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
 
-    );
 
+				}
 
 
-    // When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
 
+			);
 
 
 
-    //http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
 
+			// When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
 
 
-    THREE.DecoratedTorusKnot4a = THREE.Curve.create(
 
+			//http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
 
 
-    function(s) {
 
+			THREE.DecoratedTorusKnot4a = THREE.Curve.create(
 
 
-      this.scale = (s === undefined) ? 40 : s;
 
+				function ( s ) {
 
 
-    },
 
+					this.scale = ( s === undefined ) ? 40 : s;
 
 
-    function(t) {
 
+				},
 
 
-        t *= Math.PI * 2;
 
-        var
 
-        x = cos(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
 
-         y = sin(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
 
-          z = 0.35*sin(5*t);
 
+				function ( t ) {
 
 
-        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
+					t *= Math.PI * 2;
 
+					var x = cos( 2 * t ) * ( 1 + 0.6 * ( cos( 5 * t ) + 0.75 * cos( 10 * t ) ) );
 
+					var y = sin( 2 * t ) * ( 1 + 0.6 * ( cos( 5 * t ) + 0.75 * cos( 10 * t ) ) );
 
+					var z = 0.35 * sin( 5 * t );
 
 
-    }
 
+					return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
 
-    );
 
+				}
 
 
+			);
 
 
-    THREE.DecoratedTorusKnot4b = THREE.Curve.create(
 
 
-    function(s) {
 
+			THREE.DecoratedTorusKnot4b = THREE.Curve.create(
 
 
-      this.scale = (s === undefined) ? 40 : s;
 
+				function ( s ) {
 
 
-    },
 
+					this.scale = ( s === undefined ) ? 40 : s;
 
 
-    function(t) {
 
-        var fi = t  * Math.PI * 2;
 
-        var	x = cos(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
 
-			y = sin(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
 
-			z = 0.2*sin(9*fi);
 
+				},
 
 
-        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					var fi = t  * Math.PI * 2;
 
+					var	x = cos( 2 * fi ) * ( 1 + 0.45 * cos( 3 * fi ) + 0.4 * cos( 9 * fi ) );
 
+					var y = sin( 2 * fi ) * ( 1 + 0.45 * cos( 3 * fi ) + 0.4 * cos( 9 * fi ) );
 
+					var z = 0.2 * sin( 9 * fi );
 
 
-    );
 
+					return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
 
+				}
 
 
-    THREE.DecoratedTorusKnot5a = THREE.Curve.create(
 
+			);
 
 
-    function(s) {
 
 
-      this.scale = (s === undefined) ? 40 : s;
 
+			THREE.DecoratedTorusKnot5a = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 40 : s;
 
 
-        var fi = t  * Math.PI * 2;
 
-        var x = cos(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
 
-			y = sin(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
 
-			z = 0.2*sin(20*fi);
 
+				},
 
 
-        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					var fi = t  * Math.PI * 2;
 
+					var x = cos( 3 * fi ) * ( 1 + 0.3 * cos( 5 * fi ) + 0.5 * cos( 10 * fi ) );
 
+					var y = sin( 3 * fi ) * ( 1 + 0.3 * cos( 5 * fi ) + 0.5 * cos( 10 * fi ) );
 
+					var z = 0.2 * sin( 20 * fi );
 
 
-    );
 
+					return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
 
-    THREE.DecoratedTorusKnot5c = THREE.Curve.create(
 
+				}
 
 
-    function(s) {
 
+			);
 
 
-      this.scale = (s === undefined) ? 40 : s;
 
+			THREE.DecoratedTorusKnot5c = THREE.Curve.create(
 
 
-    },
 
+				function ( s ) {
 
 
-    function(t) {
 
+					this.scale = ( s === undefined ) ? 40 : s;
 
 
-        var fi = t  * Math.PI * 2;
 
-        var x = cos(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
 
-			y = sin(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
 
-			z = 0.35*sin(15*fi);
 
+				},
 
 
-        return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
+				function ( t ) {
 
 
-    }
 
+					var fi = t  * Math.PI * 2;
 
+					var x = cos( 4 * fi ) * ( 1 + 0.5 * ( cos( 5 * fi ) + 0.4 * cos( 20 * fi ) ) );
 
+					var y = sin( 4 * fi ) * ( 1 + 0.5 * ( cos( 5 * fi ) + 0.4 * cos( 20 * fi ) ) );
 
+					var z = 0.35 * sin( 15 * fi );
 
 
-    );
 
+					return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
 
+				}
 
 
+			);
 
 
+			//
 
 
-    var container, stats;
 
+			var container, stats;
 
 
-    var camera, scene, renderer;
 
+			var camera, scene, renderer;
 
 
-    var text, plane;
 
+			var text, plane;
 
 
-    var targetRotation = 0;
 
-    var targetRotationOnMouseDown = 0;
 
+			var targetRotation = 0;
 
+			var targetRotationOnMouseDown = 0;
 
 
-    var mouseX = 0;
 
-    var mouseXOnMouseDown = 0;
 
+			var mouseX = 0;
 
+			var mouseXOnMouseDown = 0;
 
 
-    var windowHalfX = window.innerWidth / 2;
 
-    var windowHalfY = window.innerHeight / 2;
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
 
-    init();
 
-    animate();
 
+			init();
 
+			animate();
 
 
-    function init() {
 
+			function init() {
 
 
-      container = document.createElement('div');
 
-      document.body.appendChild(container);
 
+				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);
 
+				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();
 
+				scene = new THREE.Scene();
 
 
-      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
 
-      camera.position.set(0, 50, 500);
 
-      scene.add(camera);
 
+				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);
 
+				var light = new THREE.DirectionalLight(0xffffff);
 
+				light.position.set(0, 0, 1);
 
+				scene.add(light);
 
 
-      parent = new THREE.Object3D();
 
-      parent.position.y = 100;
 
-      scene.add(parent);
 
+				parent = new THREE.Object3D();
 
+				parent.position.y = 100;
 
+				scene.add(parent);
 
 
-      function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
 
+				function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
 
 
-          // 3d shape
 
-          var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
 
-            new THREE.MeshLambertMaterial({
 
-                color: color,
 
-                opacity: 0.2,
 
-				transparent: true
 
-            }),
 
-           new THREE.MeshBasicMaterial({
 
-              color: 0x000000,
 
-			  opacity: 0.3,
 
-              wireframe: true
 
-          })]);
 
+					// 3d shape
 
 
-          if (geometry.debug) mesh.add(geometry.debug);
 
+					var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
 
 
-          mesh.position.set(x, y, z - 75);
 
-          mesh.rotation.set(rx, ry, rz);
 
-          mesh.scale.set(s, s, s);
 
-		  //mesh.children[0].doubleSided = true;
 
-          parent.add(mesh);
 
+						new THREE.MeshLambertMaterial( { color: color, opacity: 0.2, transparent: true } ),
 
+						new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true } )
 
 
-      }
 
+					] );
 
 
+					if ( geometry.debug ) mesh.add( geometry.debug );
 
 
-      // 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),
 
+					mesh.position.set( x, y, z - 75 );
 
+					mesh.rotation.set( rx, ry, rz );
 
+					mesh.scale.set(s, s, s);
 
+					//mesh.children[0].doubleSided = true;
 
+					parent.add( mesh );
 
 
-      //     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();
 
+				// 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),
 
 
-      // 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),
 
-      // ]);
 
+				// 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)]);
 
 
-      extrudePath = new THREE.TrefoilKnot();
 
-      // extrudePath = new THREE.TorusKnot(20);
 
-      // extrudePath = new THREE.CinquefoilKnot(20);
 
-      // extrudePath = new THREE.TrefoilPolynomialKnot(14);
 
-      // extrudePath = new THREE.FigureEightPolynomialKnot();
 
-      // extrudePath = new THREE.DecoratedTorusKnot4a();
 
-	  // extrudePath = new THREE.DecoratedTorusKnot4b();
 
-      // extrudePath = new THREE.DecoratedTorusKnot5a();
 
-      // extrudePath = new THREE.DecoratedTorusKnot5c();
 
+				// var extrudePath = new THREE.HeartCurve( 3.5 );
 
+				// var extrudePath = new THREE.VivianiCurve( 70 );
 
+				// var extrudePath = new THREE.KnotCurve();
 
+				// extrudePath = new THREE.HelixCurve();
 
 
-      var closed = true;
 
-      var debug = true;
 
-	  var tube = new THREE.TubeGeometry(extrudePath, 100, 2, 3, closed, debug);
 
+				// 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 ),
 
+				// ] );
 
 
-      addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 6);
 
+				extrudePath = new THREE.TrefoilKnot();
 
+				// extrudePath = new THREE.TorusKnot( 20 );
 
+				// extrudePath = new THREE.CinquefoilKnot( 20 );
 
+				// extrudePath = new THREE.TrefoilPolynomialKnot( 14 );
 
+				// extrudePath = new THREE.FigureEightPolynomialKnot();
 
+				// extrudePath = new THREE.DecoratedTorusKnot4a();
 
+				// extrudePath = new THREE.DecoratedTorusKnot4b();
 
+				// extrudePath = new THREE.DecoratedTorusKnot5a();
 
+				// extrudePath = new THREE.DecoratedTorusKnot5c();
 
 
+				var closed = true;
 
+				var debug = true;
 
+				var tube = new THREE.TubeGeometry( extrudePath, 100, 2, 3, closed, debug );
 
 
-      //
 
-      renderer = new THREE.WebGLRenderer({
 
-          antialias: true
 
-      });
 
-      renderer.setSize(window.innerWidth, window.innerHeight);
 
+				addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 6);
 
 
-      container.appendChild(renderer.domElement);
 
+				//
 
 
-      stats = new Stats();
 
-      stats.domElement.style.position = 'absolute';
 
-      stats.domElement.style.top = '0px';
 
-      container.appendChild(stats.domElement);
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild(renderer.domElement);
 
 
-      document.addEventListener('mousedown', onDocumentMouseDown, false);
 
-      document.addEventListener('touchstart', onDocumentTouchStart, false);
 
-      document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+				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) {
 
+			//
 
 
-      event.preventDefault();
 
+			function onDocumentMouseDown( event ) {
 
 
-      document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.addEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.addEventListener('mouseout', onDocumentMouseOut, false);
 
+				event.preventDefault();
 
 
-      mouseXOnMouseDown = event.clientX - windowHalfX;
 
-      targetRotationOnMouseDown = targetRotation;
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
+				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
 
-    }
 
+				mouseXOnMouseDown = event.clientX - windowHalfX;
 
+				targetRotationOnMouseDown = targetRotation;
 
 
-    function onDocumentMouseMove(event) {
 
+			}
 
 
-      mouseX = event.clientX - windowHalfX;
 
+			function onDocumentMouseMove( event ) {
 
 
-      targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
 
+				mouseX = event.clientX - windowHalfX;
 
+				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;
 
 
-      }
 
+				}
 
 
-    }
 
+			}
 
 
-    //
 
+			//
 
 
-    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>
 
+			}
 
 
-  </body>
 
+		</script>
 
+	</body>
 
 </html>