fixed ParametricGeometry bugs

examples/webgl_geometries2.html

@@ -9,7 +9,7 @@
 				font-family: Monospace;
 				background-color: #000;
 				margin: 0px;
-				overflow: hidden;
+				/*overflow: hidden;*/
 			}
 		</style>
 	</head>
@@ -22,6 +22,7 @@
 
 		<script src="js/CurveExtras.js"></script>
 
+		<script src="js/UVsUtils.js"></script>
 		<script src="../src/extras/geometries/ParametricGeometry.js"></script>
 		<script src="../src/extras/geometries/ParametricGeometries.js"></script>
 		<script>
@@ -68,13 +69,13 @@
 				var q = 3;
 				var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;
 
-				var GrannyKnot =  new THREE.Curves.GrannyKnot();
-				var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
-				var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
-				var sphere = new THREE.SphereGeometry( 75, 20, 10 );
-				var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
-				var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
-				var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
+				// var GrannyKnot =  new THREE.Curves.GrannyKnot();
+				// var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
+				// var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
+				// var sphere = new THREE.SphereGeometry( 75, 20, 10 );
+				// var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
+				// var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
+				// var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
 
 
 				// var benchmarkCopies = 1000;
@@ -86,46 +87,60 @@
 				//   scene.add( object );
 				// }
 
-				object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
+				console.log(THREE.ParametricGeometries);
+				var geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.klein);
+				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
+				object.children[ 0 ].doubleSided = true;
 				object.position.set( 0, 0, 0 );
+				object.scale.multiplyScalar(10);
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
-				object.position.set( 0, 100, 0 );
-				scene.add( object );
+				// var geo = new THREE.ParametricGeometry(10, 10, THREE.ParametricGeometries.plane(200, 200));
+				THREE.UVsDebug( geo );
+				document.body.appendChild( THREE.UVsDebug( geo ));
+				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 
 
-				object.children[ 0 ].doubleSided = true;
+				// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
+				// object.position.set( 0, 0, 0 );
+				// scene.add( object );
 
-				 object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
-				 object.position.set( 500, 0, 0 );
-				 scene.add( object );
+				// object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
+				// object.position.set( 0, 100, 0 );
+				// scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
-				object.position.set( 200, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
-				object.position.set( 0, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
-				object.position.set( 100, 0, 0 );
-				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
-				object.position.set( 100, 0, 0 );
-				scene.add( object );
+				//  object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
+				//  object.position.set( 500, 0, 0 );
+				//  scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
-				// object.children[ 0 ].doubleSided = true;
-				object.position.set( -200, 100, 0 );
-				scene.add( object );
+				// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
+				// object.position.set( 200, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
+				// object.position.set( 0, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
+				// object.position.set( 100, 0, 0 );
+				// scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
+				// object.position.set( 100, 0, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
+				// // object.children[ 0 ].doubleSided = true;
+				// object.position.set( -200, 100, 0 );
+				// scene.add( object );
+
+				// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
 				// object.children[ 0 ].doubleSided = true;
-				object.position.set( -200, 100, 0 );
-				scene.add( object );
+				// object.position.set( -200, 100, 0 );
+				// scene.add( object );
 
 				object = new THREE.AxisHelper();
 				object.position.set( 200, 0, -200 );

src/extras/geometries/ParametricGeometries.js

@@ -121,29 +121,41 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
 THREE.TorusKnotGeometry2.prototype = new THREE.Geometry();
 THREE.TorusKnotGeometry2.prototype.constructor = THREE.TorusKnotGeometry2;
 
-
  var sin = Math.sin, cos = Math.cos, pi = Math.PI;
 
+THREE.ParametricGeometries = {
+    klein: function (v, u) {
+        u *= pi;
+        v *= 2 * pi;
+
+        u = u * 2;
+        var x, y, z;
+        if (u < pi) {
+            x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
+            z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
+        } else {
+            x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
+            z = -8 * sin(u);
+        }
+      
+        y = -2 * (1 - cos(u) / 2) * sin(v);
+        
+        return new THREE.Vector3(x, y, z);
+    },
+
+    plane: function (width, height) {
+        
+        return function(u, v) {
+            var x = u * width;
+            var y = 0; 
+            var z = v * height;
 
-function klein(u, v) {
-    u *= pi;
-    v *= 2 * pi;
+            console.log(x, y, z);
 
-    u = u * 2;
-    var x, y, z;
-    if (u < pi) {
-        x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
-        z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
-    } else {
-        x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
-        z = -8 * sin(u);
+            return new THREE.Vector3(x, y, z);
+        };
     }
-  
-    y = -2 * (1 - cos(u) / 2) * sin(v);
-    
-    return new THREE.Vector3(x, y, z);
-}
-
+};
 
 
 THREE.SphereGeometry2 = function(size, x, y) {
@@ -171,7 +183,6 @@ THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {
 
     function plane(u, v) {
         
-        console.log('u, v', u, v);
         var x = u * width;
         var y = 0; 
         var z = v * depth;

src/extras/geometries/ParametricGeometry.js

@@ -17,6 +17,9 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
 	var i, il, j, p;
 	var u, v;
 
+	var stackCount = stacks + 1;
+	var sliceCount = slices + 1;
+	
 	for ( i = 0; i <= stacks; i ++ ) {
 
 		v = i / stacks;
@@ -33,34 +36,34 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
 
 	var v = 0, next;
 	var a, b, c, d;
-	var uva, uvb, ubc, uvd;
+	var uva, uvb, uvc, uvd;
 
-	// Some UV / Face orientation work needs to be done here...
 	for ( i = 0; i < stacks; i ++ ) {
 		for ( j = 0; j < slices; j ++ ) {
 
-			a = i * stacks + j;
-			b = i * stacks + j + 1;
-			c = (i + 1) * stacks + j;
-			d = (i + 1) * stacks + j + 1;
+			a = i * stackCount + j;
+			b = i * stackCount + j + 1;
+			c = (i + 1) * stackCount + j;
+			d = (i + 1) * stackCount + j + 1;
 
 			uva = new THREE.UV( i / slices, j / stacks );
 			uvb = new THREE.UV( i / slices, ( j + 1 ) / stacks );
 			uvc = new THREE.UV( ( i + 1 ) / slices, j / stacks );
 			uvd = new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks );
 
-
 			faces.push( new THREE.Face3( a, b, c ) );
 			faces.push( new THREE.Face3( b, d, c ) );
 
-			uvs.push( [ uva, ubc, uvc ] );
+			uvs.push( [ uva, uvb, uvc ] );
 			uvs.push( [ uvb, uvd, uvc ] );
 		}
 		
 	}
 
+	console.log(this);
+
 	// magic bullet
-	// this.mergeVertices();
+	this.mergeVertices();
 
 	this.computeCentroids();
 	this.computeFaceNormals();