Merge remote-tracking branch 'zz85/master' into dev

examples/webgl_geometries2.html

@@ -69,13 +69,13 @@
 				var q = 3;
 				var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;
 
-				// var GrannyKnot =  new THREE.Curves.GrannyKnot();
+				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 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 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 tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
 
 
 				// var benchmarkCopies = 1000;
@@ -90,35 +90,35 @@
 				console.log(THREE.ParametricGeometries);
 				var geo;
 
-
-				geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.klein);
+				// Klein Bottle
+				geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.klein, 20, 20);
 				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 				object.children[ 0 ].doubleSided = true;
 				object.position.set( 0, 0, 0 );
 				object.scale.multiplyScalar(10);
 				scene.add( object );
 
-
-				geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.mobius);
+				// Mobius Strip
+				geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius, 20, 20);
 				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 				// object.children[ 0 ].doubleSided = true;
 				object.position.set( 10, 0, 0 );
 				object.scale.multiplyScalar(100);
 				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 );
+				// var geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.plane(200, 200), 10, 10);
+				// THREE.UVsDebug( geo );
+				// document.body.appendChild( THREE.UVsDebug( geo ));
+				// object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 
 
 				// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
 				// object.position.set( 0, 0, 0 );
 				// scene.add( object );
 
-				// object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
-				// object.position.set( 0, 100, 0 );
-				// scene.add( object );
+				object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
+				object.position.set( 0, 100, 0 );
+				scene.add( object );
 
 
 
@@ -127,21 +127,18 @@
 				//  object.position.set( 500, 0, 0 );
 				//  scene.add( object );
 
-				// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
-				// object.position.set( 200, 0, 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( 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( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
 				// // object.children[ 0 ].doubleSided = true;

src/extras/geometries/ParametricGeometries.js

@@ -5,69 +5,69 @@
  */
 THREE.TubeGeometry2 = function(path, segments, radius, segmentsRadius, closed, debug) {
 
-    this.path = path;
-    this.segments = segments || 64;
-    this.radius = radius || 1;
-    this.segmentsRadius = segmentsRadius || 8;
-    this.closed = closed || false;
-    if (debug) this.debug = new THREE.Object3D();
+	this.path = path;
+	this.segments = segments || 64;
+	this.radius = radius || 1;
+	this.segmentsRadius = segmentsRadius || 8;
+	this.closed = closed || false;
+	if (debug) this.debug = new THREE.Object3D();
 
 
-    var scope = this,
+	var scope = this,
 
-        tangent, normal, binormal,
+		tangent, normal, binormal,
 
-        numpoints = this.segments + 1,
+		numpoints = this.segments + 1,
 
-        x, y, z, tx, ty, tz, u, v,
+		x, y, z, tx, ty, tz, u, v,
 
-        cx, cy, pos, pos2 = new THREE.Vector3(),
-        i, j, ip, jp, a, b, c, d, uva, uvb, uvc, uvd;
+		cx, cy, pos, pos2 = new THREE.Vector3(),
+		i, j, ip, jp, a, b, c, d, uva, uvb, uvc, uvd;
 
-    var frames = new THREE.TubeGeometry.FrenetFrames(path, segments, closed),
-        tangents = frames.tangents,
-        normals = frames.normals,
-        binormals = frames.binormals;
+	var frames = new THREE.TubeGeometry.FrenetFrames(path, segments, closed),
+		tangents = frames.tangents,
+		normals = frames.normals,
+		binormals = frames.binormals;
 
-        // proxy internals
-        this.tangents = tangents;
-        this.normals = normals;
-        this.binormals = binormals;
+		// proxy internals
+		this.tangents = tangents;
+		this.normals = normals;
+		this.binormals = binormals;
 
    
 
-    var ParametricTube = function(u, v) {
-        v *= 2 * pi;
-        
-        i = u * (numpoints - 1);
-        i = Math.floor(i);
+	var ParametricTube = function(u, v) {
+		v *= 2 * pi;
+		
+		i = u * (numpoints - 1);
+		i = Math.floor(i);
 
-        pos = path.getPointAt(u);
+		pos = path.getPointAt(u);
 
-        tangent = tangents[i];
-        normal = normals[i];
-        binormal = binormals[i];
+		tangent = tangents[i];
+		normal = normals[i];
+		binormal = binormals[i];
 
-        if (scope.debug) {
+		if (scope.debug) {
 
-            scope.debug.add(new THREE.ArrowHelper(tangent, pos, radius, 0x0000ff));
-            scope.debug.add(new THREE.ArrowHelper(normal, pos, radius, 0xff0000));
-            scope.debug.add(new THREE.ArrowHelper(binormal, pos, radius, 0x00ff00));
+			scope.debug.add(new THREE.ArrowHelper(tangent, pos, radius, 0x0000ff));
+			scope.debug.add(new THREE.ArrowHelper(normal, pos, radius, 0xff0000));
+			scope.debug.add(new THREE.ArrowHelper(binormal, pos, radius, 0x00ff00));
 
-        }
-        
-        cx = -scope.radius * Math.cos(v); // TODO: Hack: Negating it so it faces outside.
-        cy = scope.radius * Math.sin(v);
+		}
+		
+		cx = -scope.radius * Math.cos(v); // TODO: Hack: Negating it so it faces outside.
+		cy = scope.radius * Math.sin(v);
 
-        pos2.copy(pos);
-        pos2.x += cx * normal.x + cy * binormal.x;
-        pos2.y += cx * normal.y + cy * binormal.y;
-        pos2.z += cx * normal.z + cy * binormal.z;
+		pos2.copy(pos);
+		pos2.x += cx * normal.x + cy * binormal.x;
+		pos2.y += cx * normal.y + cy * binormal.y;
+		pos2.z += cx * normal.z + cy * binormal.z;
 
-        return pos2.clone();
-    };
+		return pos2.clone();
+	};
 
-    THREE.ParametricGeometry.call(this, segments, segmentsRadius, ParametricTube);
+	THREE.ParametricGeometry.call(this, ParametricTube, segments, segmentsRadius);
 
 };
 
@@ -89,31 +89,31 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
 	this.heightScale = heightScale || 1;
    
    
-    var TorusKnotCurve = THREE.Curve.create(
+	var TorusKnotCurve = THREE.Curve.create(
 
-        function() {
-        },
+		function() {
+		},
 
-        function(t) {
+		function(t) {
 
-        	t *= Math.PI * 2;
+			t *= Math.PI * 2;
 
-            var r = 0.5;
-          
-        	var tx = (1 + r * Math.cos(q * t)) * Math.cos(p * t),
-        		ty = (1 + r * Math.cos(q * t)) * Math.sin(p * t),
-        		tz = r * Math.sin(q * t);
+			var r = 0.5;
+		  
+			var tx = (1 + r * Math.cos(q * t)) * Math.cos(p * t),
+				ty = (1 + r * Math.cos(q * t)) * Math.sin(p * t),
+				tz = r * Math.sin(q * t);
 
-        	return new THREE.Vector3(tx, ty * heightScale, tz).multiplyScalar(radius);
+			return new THREE.Vector3(tx, ty * heightScale, tz).multiplyScalar(radius);
 
-        }
+		}
 
-    );
-    var segments = segmentsR;
-    var radiusSegments = segmentsT;
-    var extrudePath = new TorusKnotCurve();
+	);
+	var segments = segmentsR;
+	var radiusSegments = segmentsT;
+	var extrudePath = new TorusKnotCurve();
 
-     THREE.TubeGeometry2.call( this, extrudePath, segments, tube, radiusSegments, true, false );
+	 THREE.TubeGeometry2.call( this, extrudePath, segments, tube, radiusSegments, true, false );
 
 
 };
@@ -124,85 +124,85 @@ 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;
-
-            console.log(x, y, z);
-
-            return new THREE.Vector3(x, y, z);
-        };
-    },
-
-    mobius: function(u, t) {
-
-        // flat mobius strip
-        // http://www.wolframalpha.com/input/?i=M%C3%B6bius+strip+parametric+equations&lk=1&a=ClashPrefs_*Surface.MoebiusStrip.SurfaceProperty.ParametricEquations-
-        // u = u - 0.5;
-        // var v = 2 * pi * t;
-
-        // var x, y, z;
-
-        // var a = 2;
-        // x = cos(v) * (a + u * cos(v/2));
-        // y = sin(v) * (a + u * cos(v/2));
-        // z = u * sin(v/2);
-        // return new THREE.Vector3(x, y, z);
-
-        // volumetric mobius strip
-        u *= pi;
-        t *= 2 * pi;
-
-        u = u * 2
-        var phi = u / 2
-        var major = 2.25, a = 0.125, b = 0.65;
-        var x, y, z;
-        x = a * cos(t) * cos(phi) - b * sin(t) * sin(phi);
-        z = a * cos(t) * sin(phi) + b * sin(t) * cos(phi);
-        y = (major + x) * sin(u);
-        x = (major + x) * cos(u);
-        return new THREE.Vector3(x, y, z);
-    }
+	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;
+
+			console.log(x, y, z);
+
+			return new THREE.Vector3(x, y, z);
+		};
+	},
+
+	mobius: function(u, t) {
+
+		// flat mobius strip
+		// http://www.wolframalpha.com/input/?i=M%C3%B6bius+strip+parametric+equations&lk=1&a=ClashPrefs_*Surface.MoebiusStrip.SurfaceProperty.ParametricEquations-
+		// u = u - 0.5;
+		// var v = 2 * pi * t;
+
+		// var x, y, z;
+
+		// var a = 2;
+		// x = cos(v) * (a + u * cos(v/2));
+		// y = sin(v) * (a + u * cos(v/2));
+		// z = u * sin(v/2);
+		// return new THREE.Vector3(x, y, z);
+
+		// volumetric mobius strip
+		u *= pi;
+		t *= 2 * pi;
+
+		u = u * 2
+		var phi = u / 2
+		var major = 2.25, a = 0.125, b = 0.65;
+		var x, y, z;
+		x = a * cos(t) * cos(phi) - b * sin(t) * sin(phi);
+		z = a * cos(t) * sin(phi) + b * sin(t) * cos(phi);
+		y = (major + x) * sin(u);
+		x = (major + x) * cos(u);
+		return new THREE.Vector3(x, y, z);
+	}
 
 };
 
 
 THREE.SphereGeometry2 = function(size, x, y) {
 
-    function sphere(u, v) {
-        u *= pi;
-        v *= 2 * pi;
-        
-        var x = sin(u) * cos(v);
-        var y = cos(u);
-        var z = -sin(u) * sin(v);
+	function sphere(u, v) {
+		u *= pi;
+		v *= 2 * pi;
+		
+		var x = sin(u) * cos(v);
+		var y = cos(u);
+		var z = -sin(u) * sin(v);
 
-        return new THREE.Vector3(x, y, z).multiplyScalar(size);
-    }
+		return new THREE.Vector3(x, y, z).multiplyScalar(size);
+	}
   
-    THREE.ParametricGeometry.call(this, y, x, sphere);
+	THREE.ParametricGeometry.call(this, sphere, y, x);
 
 };
 
@@ -212,16 +212,16 @@ THREE.SphereGeometry2.prototype.constructor = THREE.SphereGeometry2;
 
 THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {
 
-    function plane(u, v) {
-        
-        var x = u * width;
-        var y = 0; 
-        var z = v * depth;
+	function plane(u, v) {
+		
+		var x = u * width;
+		var y = 0; 
+		var z = v * depth;
 
-        return new THREE.Vector3(x, y, z);
-    }
+		return new THREE.Vector3(x, y, z);
+	}
   
-    THREE.ParametricGeometry.call(this, segmentsWidth, segmentsDepth, plane);
+	THREE.ParametricGeometry.call(this, plane, segmentsWidth, segmentsDepth);
 
 };
 

src/extras/geometries/ParametricGeometry.js

@@ -4,7 +4,7 @@
  * based on the brilliant article by @prideout http://prideout.net/blog/?p=44
  */
 
-THREE.ParametricGeometry = function ( slices, stacks, func ) {
+THREE.ParametricGeometry = function ( func, slices, stacks, face4 ) {
 
 	THREE.Geometry.call( this );
 
@@ -12,7 +12,7 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
 	var faces = this.faces;
 	var uvs = this.faceVertexUvs[ 0 ];
 
-	var face3 = true;
+	var useFace3 = (face4 === undefined) ? true : !face4;
 
 	var i, il, j, p;
 	var u, v;
@@ -40,30 +40,40 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
 	for ( i = 0; i < stacks; i ++ ) {
 		for ( j = 0; j < slices; j ++ ) {
 
-			a = i * stackCount + j;
-			b = i * stackCount + j + 1;
-			c = (i + 1) * stackCount + j;
-			d = (i + 1) * stackCount + j + 1;
+			a = i * sliceCount + j;
+			b = i * sliceCount + j + 1;
+			c = (i + 1) * sliceCount + j;
+			d = (i + 1) * sliceCount + 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 ) );
+			if ( useFace3 ) {
+
+				faces.push( new THREE.Face3( a, b, c ) );
+				faces.push( new THREE.Face3( b, d, c ) );
+
+				uvs.push( [ uva, uvb, uvc ] );
+				uvs.push( [ uvb, uvd, uvc ] );
+
+			} else {
+
+				faces.push( new THREE.Face4( a, b, d, c ) );
+				uvs.push( [ uva, uvb, uvc, uvd ] );
+
+			}
 
-			uvs.push( [ uva, uvb, uvc ] );
-			uvs.push( [ uvb, uvd, uvc ] );
 		}
 		
 	}
 
-	console.log(this);
+	// console.log(this);
 
 	// magic bullet
 	var diff = this.mergeVertices();
-	console.log('removed ', diff, ' vertices by merging')
+	console.log('removed ', diff, ' vertices by merging');
 	
 	this.computeCentroids();
 	this.computeFaceNormals();