Big bang attempt at Text + Path + Shape + Extrude Integration. Lots of things to fix

src/extras/ShaderUtils.js

@@ -1,6 +1,15 @@
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mr.doob / http://mrdoob.com/
+ *
+ * ShaderUtils currently contains
+ *	fresnel
+ *	normal
+ * 	cube
+ * 	convolution
+ * 	film
+ * 	screen
+ *	basic
  */
 
 if ( THREE.WebGLRenderer ) {

src/extras/geometries/Curve.js

@@ -281,7 +281,7 @@ THREE.CubicBezierCurve.prototype.getPoint = function ( t ) {
  *	Spline curve
  **************************************************************/
 
-THREE.SplineCurve = function ( points ) {
+THREE.SplineCurve = function ( points /* array of Vector2*/ ) {
 
 	this.points = points;
 
@@ -401,4 +401,93 @@ curve.getPoints(); DONE
 curve.getPointAtArcLength(t); DONE
 curve.transform(params);
 curve.getTangentAt(t)
-*/
+*/
+
+/**************************************************************
+ *	3D Curves
+ **************************************************************/
+
+
+// A Factory Method for creating new curve subclasses
+THREE.Curve.create = function(constructor, getpointfunc) {
+    
+    var subClass = constructor;
+    subClass.prototype = new THREE.Curve();
+    subClass.prototype.constructor = constructor;
+    subClass.prototype.getPoint = getpointfunc;
+    return subClass;
+    
+};
+
+
+
+/**************************************************************
+ *	Line3D
+ **************************************************************/
+
+
+THREE.LineCurve3 = THREE.Curve.create(
+	
+	function ( x1, y1, z1, x2, y2, z2 ) {
+
+		this.x1 = x1;
+		this.y1 = y1;
+		this.z1 = z1;
+
+		this.x2 = x2;
+		this.y2 = y2;
+		this.z2 = z2;
+
+	},
+	
+	function ( t ) {
+
+		var dx = this.x2 - this.x1;
+		var dy = this.y2 - this.y1;
+		var dz = this.z2 - this.z1;
+		
+		var tx = this.x1 + dx * t;
+		var ty = this.y1 + dy * t;
+		var tz = this.z1 + dz * t;
+
+		return new THREE.Vector3( tx, ty, tz );
+
+	}
+);
+
+
+/**************************************************************
+ *	Quadratic Bezier 3D curve
+ **************************************************************/
+
+THREE.QuadraticBezierCurve3 = THREE.Curve.create(
+	function ( x0, y0, z0,
+			x1, y1, z1,
+			x2, y2, z2 ) { // Qn should we use 2 Vector3 instead?
+
+		this.x0 = x0;
+		this.y0 = y0;
+		this.z0 = z0;
+
+		this.x1 = x1;
+		this.y1 = y1;
+		this.z1 = z1;
+
+		this.x2 = x2;
+		this.y2 = y2;
+		this.z2 = z2;
+
+	},
+	
+	function ( t ) {
+
+		var tx, ty, tz;
+
+		tx = THREE.FontUtils.b2( t, this.x0, this.x1, this.x2 );
+		ty = THREE.FontUtils.b2( t, this.y0, this.y1, this.y2 );
+		tz = THREE.FontUtils.b2( t, this.z0, this.z1, this.z2 );
+
+		return new THREE.Vector2( tx, ty, tz );
+
+	}
+);

src/extras/geometries/ExtrudeGeometry.js

@@ -3,11 +3,32 @@
  * Creates extruded geometry from a path shape.
  **/
 
-THREE.ExtrudeGeometry = function( shape, options ) {
+THREE.ExtrudeGeometry = function( shapes, options ) {
+	
+	THREE.Geometry.call( this );
+	
+	shapes = shapes instanceof Array ? shapes : [ shapes ];
+	
+	var s=0, sl = shapes.length, shape;
+	
+	for (;s<sl;s++) {
+		shape = shapes[s];
+		console.log(shape);
+		this.addShape( shape, options );
+		
+	}
+	
+};
+	
+THREE.ExtrudeGeometry.prototype = new THREE.Geometry();
+
+THREE.ExtrudeGeometry.prototype.constructor = THREE.ExtrudeGeometry;
+	
+	
+THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
 
 	var amount = options.amount !== undefined ? options.amount : 100;
 
-	// todo: bevel
 	var bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 8; // 10
 	var bevelSize = options.bevelSize !== undefined ? options.bevelSize : bevelThickness; // 8 
 	var bevelEnabled = options.bevelEnabled !== undefined ? options.bevelEnabled : true; // false
@@ -31,18 +52,17 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	
 
 	// TODO, extrude by path's tangents? also via 3d path?
-
-	THREE.Geometry.call( this );
-
 	
 	// Variables initalization
 	var ahole, h, hl; // looping of holes
 	var scope = this;
 	var bevelPoints = [];
-
+	
+	var shapesOffset = this.vertices.length;
+	
 
 	// getPoints
-	var shapePoints = shape.extractAllPoints(false);
+	var shapePoints = shape.extractAllPoints(false, 8);
 	// false for getPoints | true for getSpacedPoints() for points with equal divisions
 	
     var vertices = shapePoints.shape; 
@@ -376,6 +396,9 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	}
 
 	function f3( a, b, c ) {
+		a += shapesOffset;
+		b += shapesOffset;
+		c += shapesOffset;
 
 		// if ( reverse ) { // Can now be removed
 		// 
@@ -390,7 +413,11 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	}
 
 	function f4( a, b, c, d ) {
-
+		
+		a += shapesOffset;
+		b += shapesOffset;
+		c += shapesOffset;
+		d += shapesOffset;
 
  		scope.faces.push( new THREE.Face4( a, b, c, d ) );
 
@@ -399,5 +426,3 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 };
 
 
-THREE.ExtrudeGeometry.prototype = new THREE.Geometry();
-THREE.ExtrudeGeometry.prototype.constructor = THREE.ExtrudeGeometry;

src/extras/geometries/Path.js

@@ -694,3 +694,86 @@ THREE.Path.prototype.debug = function( canvas ) {
 	}
 
 };
+
+// Breaks path into shapes
+THREE.Path.prototype.toShapes = function() {
+	
+	var i, il, item, action, args;
+
+	var subPaths = [], lastPath = new THREE.Path();
+
+	for ( i = 0, il = this.actions.length; i < il; i ++ ) {
+
+		item = this.actions[ i ];
+
+		args = item.args;
+		action = item.action;
+		
+		if (action==THREE.PathActions.MOVE_TO) {
+			if (lastPath.actions!=0) {
+				
+				subPaths.push(lastPath);
+				lastPath = new THREE.Path();
+				
+			}
+		}
+		lastPath[action].apply( lastPath, args);
+		
+	}
+	
+	if (lastPath.actions!=0) {	
+	
+		subPaths.push(lastPath);
+		
+	}
+	
+	console.log(subPaths);
+	
+	var holesFirst = !THREE.Shape.Utils.isClockWise(subPaths[0].getPoints());
+	var tmpShape, shapes = [];
+	var tmpPath;
+	
+	if (holesFirst) {
+		tmpShape = new THREE.Shape();
+		for ( i=0, il = subPaths.length; i<il; i++) {
+		
+			tmpPath = subPaths[i];
+			
+			if (THREE.Shape.Utils.isClockWise(tmpPath.getPoints())) {
+				tmpShape.actions = tmpPath.actions;
+				tmpShape.curves = tmpPath.curves;
+				
+				shapes.push(tmpShape);
+				tmpShape = new THREE.Shape();
+				
+			} else {
+				tmpShape.holes.push(tmpPath);
+			}
+		
+		}
+	} else {
+		// Shapes first
+		for ( i=0, il = subPaths.length; i<il; i++) {
+		
+			tmpPath = subPaths[i];
+			
+			if (THREE.Shape.Utils.isClockWise(tmpPath.getPoints())) {
+				
+				
+				if (tmpShape) shapes.push(tmpShape);
+				tmpShape = new THREE.Shape();
+				tmpShape.actions = tmpPath.actions;
+				tmpShape.curves = tmpPath.curves;
+				
+			} else {
+				tmpShape.holes.push(tmpPath);
+			}
+		
+		}
+		shapes.push(tmpShape);
+	}
+	
+	console.log("shape", shapes);
+	
+	return shapes;
+};

src/extras/geometries/Shape.js

@@ -7,7 +7,7 @@
 // STEP 2 Turn path into shape.
 // STEP 3 ExtrudeGeometry takes in Shape/Shapes
 // STEP 3a - Extract points from each shape, turn to vertices
-// STEP 3b - Triangulate each shape
+// STEP 3b - Triangulate each shape, add faces.
 
 THREE.Shape = function ( ) {
 
@@ -30,7 +30,7 @@ THREE.Shape.prototype.extrude = function( options ) {
 
 /* Return array of holes' getPoints() */
 
-THREE.Shape.prototype.getHoles = function( spaced ) {
+THREE.Shape.prototype.getHoles = function( spaced, divisions ) {
 
 	var getPoints = spaced ? 'getSpacedPoints' : 'getPoints';
 
@@ -38,7 +38,7 @@ THREE.Shape.prototype.getHoles = function( spaced ) {
 
 	for ( i = 0; i < il; i ++ ) {
 
-		holesPts[ i ] = this.holes[ i ][ getPoints ](); // getSpacedPoints getPoints
+		holesPts[ i ] = this.holes[ i ][ getPoints ]( divisions ); // getSpacedPoints getPoints
 
 	}
 
@@ -51,20 +51,24 @@ THREE.Shape.prototype.getHoles = function( spaced ) {
    otherwise return keypoints based on segments paramater
 */
 
-THREE.Shape.prototype.extractAllPoints = function( spaced ) {
+THREE.Shape.prototype.extractAllPoints = function( spaced, divisions ) {
 
 	var getPoints = spaced ? 'getSpacedPoints' : 'getPoints';
 
 	return {
 
-		shape: this[ getPoints ](),
-		holes: this.getHoles( spaced )
+		shape: this[ getPoints ]( divisions ),
+		holes: this.getHoles( spaced, divisions )
 
 	};
 
 };
 
 
+/**************************************************************
+ *	Utils
+ **************************************************************/
+
 THREE.Shape.Utils = {
 
 	/*
@@ -91,7 +95,6 @@ THREE.Shape.Utils = {
 			verts = [];
 
 		for ( h = 0; h < holes.length; h++ ) {
-		//for ( h = holes.length; h-- > 0; ) {
 
 			hole = holes[ h ];
 
@@ -108,8 +111,8 @@ THREE.Shape.Utils = {
 
 			// Find the shortest pair of pts between shape and hole
 
-			// TODO we could optimize with
-			// http://en.wikipedia.org/wiki/Proximity_problems
+			// Note: Actually, I'm not sure now if we could optimize this to be faster than O(m*n)
+			// But one thing is that we could speed this up by not running square roots on the pts differences
 			// http://en.wikipedia.org/wiki/Closest_pair_of_points
 			// http://stackoverflow.com/questions/1602164/shortest-distance-between-points-algorithm
 
@@ -320,7 +323,6 @@ THREE.Shape.Utils = {
 
 		}
 
-		//console.log("edited?" , triangles);
 		return triangles.concat( isolatedPts );
 
 	}, // end triangulate shapes
@@ -328,9 +330,8 @@ THREE.Shape.Utils = {
 	/*
 	triangulate2 : function( pts, holes ) {
 
-		// For use Poly2Tri.js
+		// For use with Poly2Tri.js
 
-		//var pts = this.getPoints();
 		var allpts = pts.concat();
 		var shape = [];
 		for (var p in pts) {
@@ -358,6 +359,7 @@ THREE.Shape.Utils = {
 			}
 			return -1;
 		};
+		
 		// triangulate
 		js.poly2tri.sweep.Triangulate(swctx);
 

src/extras/geometries/TextGeometry.js

@@ -76,188 +76,27 @@ THREE.TextGeometry.prototype.set = function ( text, parameters ) {
 	// Get a Font data json object
 
 	var data = THREE.FontUtils.drawText( text );
+	
+	var path = data.path;
+	
+	//path.debug(document.getElementById("boo"));
+	
+	this.fontShapes = path.toShapes();
+	console.log(path);
+	//console.log(fontShapes);
+	
+	// Either find actions or curves.
+	
+	
+	
 
-	var vertices = data.points;
-	var faces = data.faces;
-	var contour = data.contour;
-	var bezelPoints = data.bezel;
-
-	var scope = this;
-
-	scope.vertices = [];
-	scope.faces = [];
-
-	var i,
-		vert, vlen = vertices.length,
-		face, flen = faces.length,
-		bezelPt, blen = bezelPoints.length;
-
-	// Back facing vertices
-
-	for ( i = 0; i < vlen; i++ ) {
-
-		vert = vertices[ i ];
-		v( vert.x, vert.y, 0 );
-
-	}
-
-	// Front facing vertices
-
-	for ( i = 0; i < vlen; i++ ) {
-
-		vert = vertices[ i ];
-		v( vert.x, vert.y, height );
-
-	}
-
-	if ( bezelEnabled ) {
-
-		for ( i = 0; i < blen; i++ ) {
-
-			bezelPt = bezelPoints[ i ];
-			v( bezelPt.x, bezelPt.y, bezelThickness );
-
-		}
-
-		for ( i = 0; i < blen; i++ ) {
-
-			bezelPt = bezelPoints[ i ];
-			v( bezelPt.x, bezelPt.y, height - bezelThickness );
-
-		}
-
-	}
-
-	// Bottom faces
-
-	for ( i = 0; i < flen; i++ ) {
-
-		face = faces[ i ];
-		f3( face[ 2 ], face[ 1 ], face[ 0 ] );
-
-	}
-
-	// Top faces
-
-	for ( i = 0; i < flen; i++ ) {
-
-		face = faces[ i ];
-		f3( face[ 0 ] + vlen, face[ 1 ] + vlen, face[ 2 ] + vlen );
-
-	}
-
-	var lastV;
-	var j, k, l, m;
-
-	if ( bezelEnabled ) {
-
-		i = bezelPoints.length;
-
-		while ( --i > 0 ) {
-
-			if ( !lastV ) {
-
-				lastV = contour[ i ];
-
-			} else if ( lastV.equals( contour[ i ] ) ) {
-
-				// We reached the last point of a closed loop
-
-				lastV = null;
-				continue;
-
-			}
-
-			l = vlen * 2 + i;
-			m = l - 1;
-
-			// Create faces for the z-sides of the text
-
-			f4( l, m, m + blen, l + blen );
-
-			for ( j = 0; j < vlen; j++ ) {
-
-				if ( vertices[ j ].equals( contour[ i ] ) ) break;
-
-			}
-
-			for ( k = 0; k < vlen; k++ ) {
-
-				if ( vertices[ k ].equals( contour[ i - 1 ] ) ) break;
-
-			}
-
-			// Create faces for the z-sides of the text
-
-			f4( j, k, m, l );
-			f4( l + blen, m + blen, k + vlen, j + vlen );
-
-		}
-
-	} else {
-
-		i = contour.length;
-
-		while ( --i > 0 ) {
-
-			if ( !lastV ) {
-
-				lastV = contour[ i ];
-
-			} else if ( lastV.equals( contour[ i ] ) ) {
-
-				// We reached the last point of a closed loop
-
-				lastV = null;
-				continue;
-
-			}
-
-			for ( j = 0; j < vlen; j++ ) {
-
-				if ( vertices[ j ].equals( contour[ i ] ) ) break;
-
-			}
-
-			for ( k = 0; k < vlen; k++ ) {
-
-				if ( vertices[ k ].equals( contour[ i - 1 ] ) ) break;
-
-			}
-
-			// Create faces for the z-sides of the text
-
-			f4( j, k, k + vlen, j + vlen );
-
-		}
-	}
-
-
-	// UVs to be added
-
-	this.computeCentroids();
-	this.computeFaceNormals();
-	//this.computeVertexNormals();
-
-	function v( x, y, z ) {
-
-		scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
-
-	}
-
-	function f3( a, b, c ) {
-
-		scope.faces.push( new THREE.Face3( a, b, c ) );
-
-	}
-
-	function f4( a, b, c, d ) {
-
-		scope.faces.push( new THREE.Face4( a, b, c, d ) );
-
-	}
 
+};
 
+THREE.TextGeometry.prototype.get = function () {
+	var text3d = new THREE.ExtrudeGeometry( this.fontShapes , { amount: 20, bevelEnabled:false, bevelThickness:3	} );
+	// TOFIX: Fillet Cap
+	return text3d;	
 };
 
 THREE.FontUtils = {
@@ -677,9 +516,6 @@ THREE.FontUtils = {
 			
 		}
 		
-		//path.debug(document.getElementById("boo"));
-		console.log(path);
-		
 
 		// get the width
 
@@ -693,6 +529,7 @@ THREE.FontUtils = {
 
 		var extract = this.extractPoints( allPts, characterPts );
 		extract.contour = allPts;
+		extract.path = path;
 
 		var bezelPoints = [];