adding bevel

src/extras/geometries/ExtrudeGeometry.js

@@ -8,10 +8,10 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	var amount = options.amount !== undefined ? options.amount : 100;
 
 	// todo: bevel
-	var bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 10;
-	var bevelSize = options.bevelSize !== undefined ? options.bevelSize : 8;
+	var bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 8; // 10
+	var bevelSize = options.bevelSize !== undefined ? options.bevelSize : 8; // 8 
 	var bevelEnabled = options.bevelEnabled !== undefined ? options.bevelEnabled : false;
-	var bevelSegments = 3;
+	var bevelSegments = 6;
 
 	var steps = options.steps !== undefined ? options.steps : 1;
 	var extrudePath = options.path !== undefined ? options.path : null;
@@ -25,6 +25,8 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 		extrudeByPath = true;
 
 	}
+	
+	bevelEnabled = true;
 
 	// TODO, extrude by path's tangents? also via 3d path?
 
@@ -38,16 +40,18 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 
 	// getPoints
-    var vertices = shape.getSpacedPoints(); // getPoints | getSpacedPoints() you can get variable divisions by dividing by total lenght
-
-	var holes =  shape.getHoles();
+	var shapePoints = shape.extractAllPoints(true);
+	// getPoints | getSpacedPoints() you can get variable divisions by dividing by total length
+	
+    var vertices = shapePoints.shape; 
+	var holes =  shapePoints.holes;
 	
 
 	var reverse = THREE.FontUtils.Triangulate.area( vertices ) > 0 ;
 
 
 	if (reverse) {
-		console.debug("REVERSED");
+
 		vertices = vertices.reverse();
 		
 		// Maybe we should also check if holes are in the opposite direction...
@@ -67,8 +71,9 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	
 	
 	
-	var faces = THREE.Shape.Utils.triangulateShape(vertices, holes);
-    //var faces = THREE.Shape.Utils.triangulate2(vertices, holes);
+	//var faces = THREE.Shape.Utils.triangulateShape(vertices, holes);
+    
+	var faces = THREE.Shape.Utils.triangulate2(vertices, holes);
 
 
 	//console.log(faces);
@@ -79,7 +84,6 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	
 	var contour = vertices; // vertices has all points but contour has only points of circumference
 	
-	
 	for (h = 0, hl = holes.length;  h < hl; h++ ) {
 
 		ahole = holes[h];
@@ -88,11 +92,10 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 	}
 	
-	console.log("same?", contour.length, vertices.length);
+	console.log("same?", contour.length == vertices.length);
 	
 	
 
-	//console.log(reverse);
 
 	var i,
 		vert, vlen = vertices.length,
@@ -101,7 +104,7 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 		hol, hlen;
 		
 	var	bevelPt, blen = bevelPoints.length;
-
+	
 	// Back facing vertices
 
 	for ( i = 0; i < vlen; i++ ) {
@@ -135,37 +138,118 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 		}
 
 	}
-
-	/*
-	// Front facing vertices
-
-	for ( i = 0; i < vlen; i++ ) {
-
-		vert = vertices[ i ];
-		v( vert.x, vert.y, amount );
-
-	}
-	*/
-
-
-	if ( bevelEnabled ) {
-
-		for ( i = 0; i < blen; i++ ) {
-
-			bevelPt = bevelPoints[ i ];
-			v( bevelPt.x, bevelPt.y, bevelThickness );
-
-		}
-
-		for ( i = 0; i < blen; i++ ) {
-
-			bevelPt = bevelPoints[ i ];
-			v( bevelPt.x, bevelPt.y, amount - bevelThickness );
-
-		}
-
+	
+	
+	// Add bevel planes
+	
+	// Loop bevelSegments, 1 for the front, 1 for the back
+	
+	var b;
+	
+	// Find all centroids of shapes and holes
+	var sum = new THREE.Vector2();
+	var contourCentroid, holesCentroids;
+	
+	for (i=0, il = contour.length; i<il; i++) {
+		sum.addSelf(contour[i]);
 	}
 	
+	contourCentroid = sum.divideScalar( contour.length ) ;
+	
+	holesCentroids = [];
+	
+	
+	for (h=0, hl = holes.length; h<hl; h++) {
+		sum = new THREE.Vector2();
+		ahole = holes[h];
+		
+		for (i=0, il = ahole.length; i<il; i++) {
+			sum.addSelf(ahole[i]);
+		}
+		
+		holesCentroids[h] = sum.divideScalar( ahole.length ) ;
+		
+	}
+	
+	function scalePt (pt, centroid, size, expandOutwards /* Boolean */ ) {
+		vectorFromCentroid = pt.clone().subSelf( centroid );
+		adj = size / vectorFromCentroid.length();
+
+		if ( expandOutwards ) {
+
+			adj += 1;
+
+		}  else {
+
+			adj = 1 - adj;
+
+		}
+
+		return vectorFromCentroid.multiplyScalar( adj ).addSelf( centroid );
+	}
+	
+	var bs;
+	
+	for (b=bevelSegments; b > 0; b--) {
+		//   z
+		// ****
+		t =  b / bevelSegments;
+		z = bevelThickness * t;
+		bs = bevelSize * t ;
+
+		//bs = Math.sqrt(- (t* t) - 2 * t * bevelThickness);
+		
+		// contract shape
+		for ( i = 0, il = contour.length; i < il; i++ ) {
+			
+			vert = scalePt(contour[i], contourCentroid, bs , false);
+			v( vert.x, vert.y,  -z);
+			
+		}
+		
+		// expand holes
+		for ( h = 0, hl = holes.length; h < hl; h++ ) {
+			
+			ahole = holes[h];
+			for ( i = 0, il = ahole.length; i < il; i++ ) {
+				vert = scalePt(ahole[i], holesCentroids[h] , bs , true);	
+				v( vert.x, vert.y,  -z);
+			}
+			
+		}
+		
+	}
+	
+	for (b=1; b <= bevelSegments; b++) {
+		
+			t =  b / bevelSegments;
+			z = bevelThickness * t;
+			bs = bevelSize * t;
+			
+			// contract shape
+			for ( i = 0, il = contour.length; i < il; i++ ) {
+
+				vert = scalePt(contour[i], contourCentroid, bs , false);
+				v( vert.x, vert.y,  amount + z);
+
+			}
+
+			// expand holes
+			for ( h = 0, hl = holes.length; h < hl; h++ ) {
+
+				ahole = holes[h];
+				for ( i = 0, il = ahole.length; i < il; i++ ) {
+						vert = scalePt(ahole[i], holesCentroids[h] , bs , true);
+					v( vert.x, vert.y,  amount + z);
+				}
+
+			}
+		
+	}
+	
+
+
+
 	
 	////
 	///   Handle Faces
@@ -173,21 +257,48 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	
 
 	// Bottom faces
+	if ( bevelEnabled ) {
+		
+		
+		var layer = steps + 1;
+		var offset = vlen * layer;
+		
+		for ( i = 0; i < flen; i++ ) {
 
-	for ( i = 0; i < flen; i++ ) {
+			face = faces[ i ];
+			f3( face[ 2 ]+ offset, face[ 1 ]+ offset, face[ 0 ] + offset);
 
-		face = faces[ i ];
-		f3( face[ 2 ], face[ 1 ], face[ 0 ] );
+		}
 
-	}
+		layer = bevelSegments* 2;
+		offset = vlen * layer;
+		
+		// Top faces
+		var layers = (steps + bevelSegments * 2)  * vlen; 
+		for ( i = 0; i < flen; i++ ) {
 
-	// Top faces
+			face = faces[ i ];
+			f3( face[ 0 ] + offset, face[ 1 ] + offset, face[ 2 ] + offset );
 
-	for ( i = 0; i < flen; i++ ) {
+		}
 
-		face = faces[ i ];
-		f3( face[ 0 ] + vlen* steps, face[ 1 ] + vlen * steps, face[ 2 ] + vlen * steps );
+	} else {
 
+		for ( i = 0; i < flen; i++ ) {
+
+			face = faces[ i ];
+			f3( face[ 2 ], face[ 1 ], face[ 0 ] );
+
+		}
+
+		// Top faces
+		var layers = (steps + bevelSegments * 2)  * vlen; 
+		for ( i = 0; i < flen; i++ ) {
+
+			face = faces[ i ];
+			f3( face[ 0 ] + vlen* steps, face[ 1 ] + vlen * steps, face[ 2 ] + vlen * steps );
+
+		}
 	}
 
 	var tmpPt;
@@ -232,7 +343,7 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	
 			var s = 0;
 
-			for ( ; s < steps; s++ ) {
+			for ( ; s < (steps + bevelSegments* 2) ; s++ ) {
 
 				var slen1 = vlen * s;
 				var slen2 = vlen * ( s + 1 );
@@ -246,8 +357,7 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 		}
 	}
-
-
+	
 	// UVs to be added
 
 	this.computeCentroids();

src/extras/geometries/Path.js

@@ -47,6 +47,8 @@ THREE.Path.prototype.fromPoints = function( vectors /*Array of Vector*/ ) {
 
 };
 
+// startPath() endPath()?
+
 THREE.Path.prototype.moveTo = function( x, y ) {
 
 	var args = Array.prototype.slice.call( arguments );
@@ -308,13 +310,13 @@ THREE.Path.prototype.getPoints = function( divisions ) {
 			var angle;
 			var tdivisions = divisions * 2;
 			var t;
-			for ( j = 0; j < tdivisions; j ++ ) {
+			for ( j = 1; j <= tdivisions; j ++ ) {
 			
 				t = j/tdivisions;
 				
-				//if (aClockwise) {
-			//		t = 1 - t;
-			//	}
+				if (!aClockwise) {
+					t = 1 - t;
+				}
 				
 				
 				angle = aStartAngle + t * deltaAngle;

src/extras/geometries/Shape.js

@@ -28,19 +28,45 @@ THREE.Shape.prototype.extrude = function( options ) {
 };
 
 /* Return array of holes' getPoints() */
-THREE.Shape.prototype.getHoles = function() {
-
+THREE.Shape.prototype.getHoles = function(spaced) {
+	
+	var getPoints;
+	if (spaced) {
+		getPoints = 'getSpacedPoints';
+	} else {
+		getPoints = 'getPoints';
+	}
 	var holesPts = [];
 	var i=0, il= this.holes.length;
 
 	for (; i<il; i++ ) {
-		holesPts[i] = this.holes[i].getSpacedPoints(); //getSpacedPoints getPoints
+		holesPts[i] = this.holes[i][getPoints](); //getSpacedPoints getPoints
 	}
 	
 	return holesPts;
 
 };
 
+/* Returns points of shape and holes 
+spaced, when true returns points spaced by regular distances
+otherwise return keypoints based on segments paramater
+*/
+THREE.Shape.prototype.extractAllPoints = function(spaced) {
+	
+	var getPoints;
+	if (spaced) {
+		getPoints = 'getSpacedPoints';
+	} else {
+		getPoints = 'getPoints';
+	}
+	
+	return {
+		shape: this[getPoints](),
+		holes: this.getHoles(spaced)
+	};
+}
+
+
 
 
 
@@ -70,6 +96,7 @@ THREE.Shape.Utils = {
 				verts = [];
 		
 		for (h = 0; h < holes.length; h++) {
+		//for ( h = holes.length; h-- > 0; ) {
 			hole = holes[h];
 			/*
 			shapeholes[h].concat(); // preserves original 
@@ -79,6 +106,7 @@ THREE.Shape.Utils = {
 			
 			shortest = Number.POSITIVE_INFINITY;
 			
+			// THIS THING NEEDS TO BE DONE CORRECTLY AGAIN :( 
 			
 			// Find the shortest pair of pts between shape and hole
 						
@@ -90,11 +118,12 @@ THREE.Shape.Utils = {
 			for ( h2 = 0; h2 < hole.length; h2++ ) {
 
 				pts1 = hole[ h2 ];
-
+				var dist = [];
 				for ( p = 0; p < shape.length; p++ ) {
 
 					pts2 = shape[ p ];
 					d = pts1.distanceTo( pts2 );
+					dist.push(d);
 
 					if ( d < shortest ) {
 
@@ -107,21 +136,25 @@ THREE.Shape.Utils = {
 				}
 
 			}
+			console.log("shortest", shortest, dist);
 
 			prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
 			prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
 			
-			var areaapts = [];
-			areaapts.push( hole[ holeIndex ] );
-			areaapts.push( shape[ shapeIndex ] );
-			areaapts.push( shape[ prevShapeVert ] );
+			var areaapts = [
+				hole[ holeIndex ], 
+				shape[ shapeIndex ],
+				shape[ prevShapeVert ]
+			];
+			
 
 			var areaa = THREE.FontUtils.Triangulate.area( areaapts );
 
-			var areabpts = [];
-			areabpts.push( hole[ holeIndex ] );
-			areabpts.push( hole[ prevHoleVert ] );
-			areabpts.push( shape[ shapeIndex ] );
+			var areabpts = [
+				hole[ holeIndex ],
+				hole[ prevHoleVert ],
+				shape[ shapeIndex ]
+			];
 
 			var areab = THREE.FontUtils.Triangulate.area( areabpts );
 
@@ -136,28 +169,32 @@ THREE.Shape.Utils = {
 			shapeIndex %= shape.length;
 
 			if ( holeIndex < 0 ) { holeIndex += hole.length;  }
-			holeIndex %= shape.length;
+			holeIndex %= hole.length;
 
 			prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
 			prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
 			
-			areaapts = [];
-			areaapts.push( hole[ holeIndex ] );
-			areaapts.push( shape[ shapeIndex ] );
-			areaapts.push( shape[ prevShapeVert ] );
-
+			areaapts = [
+				hole[ holeIndex ], 
+				shape[ shapeIndex ],
+				shape[ prevShapeVert ]
+			];
+			
 			var areaa2 = THREE.FontUtils.Triangulate.area( areaapts );
 
-			areabpts = [];
-			areabpts.push( hole[ holeIndex ] );
-			areabpts.push( hole[ prevHoleVert ] );
-			areabpts.push( shape[ shapeIndex ] );
+			areabpts = [
+				hole[ holeIndex ],
+				hole[ prevHoleVert ],
+				shape[ shapeIndex ]
+			];
 
 			var areab2 = THREE.FontUtils.Triangulate.area( areabpts );
+			console.log(areaa,areab ,areaa2,areab2, ( areaa + areab ),  ( areaa2 + areab2 ));
+
 
 			if ( ( areaa + areab ) > ( areaa2 + areab2 ) ) {
 				// In case areas are not correct. 
-				
+				console.log("USE THIS");
 				shapeIndex = oldShapeIndex;
 				holeIndex = oldHoleIndex ;
 
@@ -165,11 +202,13 @@ THREE.Shape.Utils = {
 				shapeIndex %= shape.length;
 
 				if ( holeIndex < 0 ) { holeIndex += hole.length;  }
-				holeIndex %= shape.length;
+				holeIndex %= hole.length;
 
 				prevShapeVert = ( shapeIndex - 1 ) >= 0 ? shapeIndex - 1 : shape.length - 1;
 				prevHoleVert = ( holeIndex - 1 ) >= 0 ? holeIndex - 1 : hole.length - 1;
 
+			} else {
+				console.log("USE THAT ")
 			}
 
 			tmpShape1 = shape.slice( 0, shapeIndex );
@@ -194,6 +233,7 @@ THREE.Shape.Utils = {
 			verts.push( triangleb );
 
 			shape = tmpShape1.concat( tmpHole1 ).concat( tmpHole2 ).concat( tmpShape2 );
+			//shape = tmpHole1.concat( tmpHole2 );
 			
 		}