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

improving webgl_geometry_extrude_splines.html with more options

zz85 13 years ago
parent
e25dc64ffe
commit
1b4dbfa676
1 changed files with 133 additions and 85 deletions
Split View Show Diff Stats
  1. 133 85
      examples/webgl_geometry_extrude_splines.html

+ 133 - 85
examples/webgl_geometry_extrude_splines.html
View File 

@@ -15,8 +15,7 @@
 
     </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>
 
@@ -26,10 +25,11 @@
 
     <script>
 
 
     // Lets define some curves
 
+    THREE.Curves = {};
 
 
     // Formula from http://mathworld.wolfram.com/HeartCurve.html
 
 
-    THREE.HeartCurve = THREE.Curve.create(
 
+    THREE.Curves.HeartCurve = THREE.Curve.create(
 
 
       function ( s ) {
 
 
@@ -59,7 +59,7 @@
 
     // Viviani's Curve
 
     // http://en.wikipedia.org/wiki/Viviani%27s_curve
 
 
-    THREE.VivianiCurve = THREE.Curve.create(
 
+    THREE.Curves.VivianiCurve = THREE.Curve.create(
 
 
       function( radius ) {
 
 
@@ -81,7 +81,7 @@
 
     );
 
 
 
-    THREE.KnotCurve = THREE.Curve.create(
 
+    THREE.Curves.KnotCurve = THREE.Curve.create(
 
 
     function() {
 
 
@@ -103,7 +103,7 @@
 
 
     );
 
 
-    THREE.HelixCurve = THREE.Curve.create(
 
+    THREE.Curves.HelixCurve = THREE.Curve.create(
 
 
     function() {
 
 
@@ -126,7 +126,7 @@
 
 
     // Replacement for TorusKnotGeometry?
 
 
-    THREE.TrefoilKnot = THREE.Curve.create(
 
+    THREE.Curves.TrefoilKnot = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -149,7 +149,7 @@
 
 
     // Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
 
 
-    THREE.TorusKnot = THREE.Curve.create(
 
+    THREE.Curves.TorusKnot = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -172,7 +172,7 @@
 
     );
 
 
 
-    THREE.CinquefoilKnot = THREE.Curve.create(
 
+    THREE.Curves.CinquefoilKnot = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -195,7 +195,7 @@
 
     );
 
 
 
-    THREE.TrefoilPolynomialKnot = THREE.Curve.create(
 
+    THREE.Curves.TrefoilPolynomialKnot = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -231,7 +231,7 @@
 
 
     }
 
 
-    THREE.FigureEightPolynomialKnot = THREE.Curve.create(
 
+    THREE.Curves.FigureEightPolynomialKnot = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -257,7 +257,7 @@
 
 
     //http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
 
 
-    THREE.DecoratedTorusKnot4a = THREE.Curve.create(
 
+    THREE.Curves.DecoratedTorusKnot4a = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -280,7 +280,7 @@
 
     );
 
 
 
-    THREE.DecoratedTorusKnot4b = THREE.Curve.create(
 
+    THREE.Curves.DecoratedTorusKnot4b = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -301,7 +301,7 @@
 
     );
 
 
 
-    THREE.DecoratedTorusKnot5a = THREE.Curve.create(
 
+    THREE.Curves.DecoratedTorusKnot5a = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -322,7 +322,7 @@
 
 
     );
 
 
-    THREE.DecoratedTorusKnot5c = THREE.Curve.create(
 
+    THREE.Curves.DecoratedTorusKnot5c = THREE.Curve.create(
 
 
     function(s) {
 
 
@@ -361,6 +361,102 @@
 
     var windowHalfX = window.innerWidth / 2;
 
     var windowHalfY = window.innerHeight / 2;
 
 
+    var PipeSpline = 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), 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 sampleClosedSpline = 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 splines = {
 
+      HeartCurve: new THREE.Curves.HeartCurve(3.5),
 
+      VivianiCurve: new THREE.Curves.VivianiCurve(70),
 
+      KnotCurve: new THREE.Curves.KnotCurve(),
 
+      HelixCurve: new THREE.Curves.HelixCurve(),
 
+      TrefoilKnot: new THREE.Curves.TrefoilKnot(),
 
+      TorusKnot: new THREE.Curves.TorusKnot(20),
 
+      CinquefoilKnot: new THREE.Curves.CinquefoilKnot(20),
 
+      TrefoilPolynomialKnot: new THREE.Curves.TrefoilPolynomialKnot(14),
 
+      FigureEightPolynomialKnot: new THREE.Curves.FigureEightPolynomialKnot(),
 
+      DecoratedTorusKnot4a: new THREE.Curves.DecoratedTorusKnot4a(),
 
+      DecoratedTorusKnot4b: new THREE.Curves.DecoratedTorusKnot4b(),
 
+      DecoratedTorusKnot5a: new THREE.Curves.DecoratedTorusKnot5a(),
 
+      DecoratedTorusKnot5c: new THREE.Curves.DecoratedTorusKnot5c()
 
+    };
 
+
 
+
 
+
 
+
 
+    extrudePath = new THREE.Curves.TrefoilKnot();
 
+
 
+    var dropdown = '<select id="dropdown" onchange="addTube(this.value)">';
 
+
 
+    var s;
 
+    for ( s in splines ) {
 
+      dropdown += '<option value="' + s + '"';
 
+
 
+      // dropdown += (geometryIndex == i)  ? ' selected' : '';
 
+
 
+      dropdown += '>' + s + '</option>';
 
+    }
 
+
 
+    dropdown += '</select>';
 
+
 
+
 
+
 
+    var closed = true;
 
+    var debug = true;
 
+    var parent;
 
+    var tubeMesh;
 
+
 
+    function addTube() {
 
+
 
+      var value = document.getElementById('dropdown').value;
 
+      var scale = parseInt(document.getElementById('scale').value);
 
+      var segments = parseInt(document.getElementById('segments').value);
 
+      var closedv = document.getElementById('closed').value;
 
+      var debugv = document.getElementById('debug').value;
 
+
 
+      console.log('adding tube', value, closedv, debugv);
 
+      if (tubeMesh) parent.remove(tubeMesh);
 
+
 
+      extrudePath = splines[value];
 
+      
+      var tube = new THREE.TubeGeometry(extrudePath, segments, 2, 3, closed, debug);
 
+
 
+      
+      addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, scale);
 
+    }
 
+
 
+    function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
 
+
 
+        // 3d shape
 
+        tubeMesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
 
+          new THREE.MeshLambertMaterial({
 
+              color: color,
 
+              opacity: 0.2
 
+          }),
 
+         new THREE.MeshBasicMaterial({
 
+            color: 0x000000,
 
+            wireframe: true,
 
+            transparent: true
 
+        })]);
 
+
 
+        if (geometry.debug) tubeMesh.add(geometry.debug);
 
+
 
+        tubeMesh.position.set(x, y, z - 75);
 
+        tubeMesh.rotation.set(rx, ry, rz);
 
+        tubeMesh.scale.set(s, s, s);
 
+        //mesh.children[0].doubleSided = true;
 
+        parent.add(tubeMesh);
 
+
 
+    }    
+
 
+
 
     init();
 
     animate();
 
 
@@ -374,7 +470,15 @@
 
       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';
 
+      info.innerHTML = 'Spline Extrusion Examples by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Select spline:';
 
+
 
+      info.innerHTML += dropdown;
 
+
 
+      info.innerHTML += '<br/>Scale: <select id="scale" onchange="addTube()"><option>1</option><option>2</option><option selected>4</option><option>6</option></select>';
 
+      info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
 
+      info.innerHTML += '<br/>Debug: <input id="debug" type="checkbox" onchange="addTube()"/> Closed:<input id="closed" onchange="addTube()" type="checkbox"/>';
 
+      // tube segments
 
+
 
       container.appendChild(info);
 
 
       scene = new THREE.Scene();
 
@@ -391,64 +495,8 @@
 
       parent.position.y = 100;
 
       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,
 
-                opacity: 0.2
 
-            }),
 
-           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);
 
-		  //mesh.children[0].doubleSided = true;
 
-          parent.add(mesh);
 
-
 
-      }
 
-
 
-
 
-      // 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),
 
-
 
-      //     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.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),
 
-      // ]);
 
-
 
-      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);
 
+      addTube()
 
 
-      addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 6);
 
 
 
       //
 
@@ -464,9 +512,9 @@
 
       stats.domElement.style.top = '0px';
 
       container.appendChild(stats.domElement);
 
 
-      document.addEventListener('mousedown', onDocumentMouseDown, false);
 
-      document.addEventListener('touchstart', onDocumentTouchStart, false);
 
-      document.addEventListener('touchmove', onDocumentTouchMove, false);
 
+      renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
 
+      renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
 
+      renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);
 
 
     }
 
 
@@ -476,9 +524,9 @@
 
 
       event.preventDefault();
 
 
-      document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.addEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.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;
 
       targetRotationOnMouseDown = targetRotation;
 
@@ -495,17 +543,17 @@
 
 
     function onDocumentMouseUp(event) {
 
 
-      document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.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) {
 
 
-      document.removeEventListener('mousemove', onDocumentMouseMove, false);
 
-      document.removeEventListener('mouseup', onDocumentMouseUp, false);
 
-      document.removeEventListener('mouseout', onDocumentMouseOut, false);
 
+      renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
 
+      renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
 
+      renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);
 
 
     }