Merged zz85's stepping + spline path extrusions.

Changed default extrusion stepping to 1 segment, smaller default tessellation is usually preferable (for flat surfaces).

examples/canvas_geometry_shape.html

@@ -211,6 +211,30 @@
 
 				var fish3d = fishShape.extrude( extrudeSettings );
 
+				// Spline shape + Path Extrusion
+
+				var splinepts = [];
+				splinepts.push( new THREE.Vector2 ( 350, 100 ) );
+				splinepts.push( new THREE.Vector2 ( 400, 450 ) );
+				splinepts.push( new THREE.Vector2 ( -140, 350 ) );
+				splinepts.push( new THREE.Vector2 ( 0, 0 ) );
+
+				var splineShape = new THREE.Shape(  );
+				splineShape.moveTo( 0, 0 );
+				splineShape.splineThru( splinepts );
+
+				//splineShape.debug( document.getElementById("debug") );
+
+				var extrudePath = new THREE.Path();
+
+				extrudePath.lineTo( 10, 10 );
+				extrudePath.quadraticCurveTo( 80, 60, 160, 10 );
+				extrudePath.quadraticCurveTo( 240, -40, 320, 10 );
+
+				extrudeSettings.path = extrudePath;
+
+				var splineShape3d = splineShape.extrude( extrudeSettings );
+
 				addGeometry( california3d, 	0xffaa00, -300, -100, 0,     0, 0, 0, 0.25 );
 				addGeometry( triangle3d, 	0xffee00, -180,    0, 0,     0, 0, 0, 1 );
 				addGeometry( roundedRect3d, 0x005500, -150,  150, 0,     0, 0, 0, 1 );
@@ -218,7 +242,7 @@
 				addGeometry( heart3d, 		0xff1100,    0,  100, 0,   3.14, 0, 0, 1 );
 				addGeometry( circle3d, 		0x00ff11,  150,    0, 0,     0, 0, 0, 1 );
 				addGeometry( fish3d, 		0x222222,  -50,  200, 0,     0, 0, 0, 1 );
-
+				addGeometry( splineShape3d, 0x888888,  -50,  -100, -50,     0, 0, 0, 0.2 );
 
 				renderer = new THREE.CanvasRenderer();
                 renderer.setSize( window.innerWidth, window.innerHeight );

src/extras/geometries/ExtrudeGeometry.js

@@ -13,6 +13,21 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	var bezelSize = options.bezelSize !== undefined ? options.bezelSize : 8;
 	var bezelEnabled = options.bezelEnabled !== undefined ? options.bezelEnabled : false;
 
+	var steps = options.steps !== undefined ? options.steps : 1;
+	var extrudePath = options.path !== undefined ? options.path : null;
+
+	var extrudePts, extrudeByPath = false;
+
+	if ( extrudePath ) {
+
+		extrudePts = extrudePath.getPoints();
+		steps = extrudePts.length;
+		extrudeByPath = true;
+
+	}
+
+	// TODO, extrude by path's tangents? also via 3d path?
+
 	THREE.Geometry.call( this );
 
     var vertices = shape.getPoints();
@@ -23,6 +38,10 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 	var bezelPoints = [];
 
+	var reverse = THREE.FontUtils.Triangulate.area( vertices ) > 0 ;
+
+	//console.log(reverse);
+
 	var i,
 		vert, vlen = vertices.length,
 		face, flen = faces.length,
@@ -37,6 +56,31 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 	}
 
+	// Add steped vertices...
+	// Including front facing vertices
+
+	var s = 1;
+	for ( ; s <= steps; s++ ) {
+
+		for ( i = 0; i < vlen; i ++ ) {
+
+			vert = vertices[ i ];
+
+			if ( !extrudeByPath ) {
+
+				v( vert.x, vert.y, amount/steps * s );
+
+			} else {
+
+				v( vert.x, vert.y + extrudePts[ s - 1 ].y, extrudePts[ s - 1 ].x );
+
+			}
+
+		}
+
+	}
+
+	/*
 	// Front facing vertices
 
 	for ( i = 0; i < vlen; i++ ) {
@@ -45,6 +89,8 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 		v( vert.x, vert.y, amount );
 
 	}
+	*/
+
 
 	if ( bezelEnabled ) {
 
@@ -78,24 +124,26 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	for ( i = 0; i < flen; i++ ) {
 
 		face = faces[ i ];
-		f3( face[ 0 ] + vlen, face[ 1 ] + vlen, face[ 2 ] + vlen );
+		f3( face[ 0 ] + vlen* steps, face[ 1 ] + vlen * steps, face[ 2 ] + vlen * steps );
 
 	}
 
 	var lastV;
 	var j, k, l, m;
 
+	// Sides faces
 
-	// Faces Sides
-
-	contour.push( contour[ 0 ] ); // in order not to check for boundary indices every time
+	//contour.push( contour[ 0 ] ); // in order not to check for boundary indices every time
 
 	i = contour.length;
 
-	while ( --i > 0 ) {
+	while ( --i >= 0 ) {
 
 		lastV = contour[ i ];
 
+		// TO OPTIMISE. Reduce this step of checking vertices.
+
+		/*
 		for ( j = 0; j < vlen; j++ ) {
 
 			if ( vertices[ j ].equals( contour[ i ] ) ) break;
@@ -107,10 +155,41 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 			if ( vertices[ k ].equals( contour[ i - 1 ] ) ) break;
 
 		}
+		*/
+
+		//TOREMOVE
+		//console.log('a', i,j, i-1, k);
+
+		j = i;
+		//if (j==vertices.length) j = 0;
+
+		k = i - 1;
+
+		if ( k < 0 ) k = vertices.length - 1;
+
+		//console.log('b', i,j, i-1, k,vertices.length);
 
 		// Create faces for the z-sides of the text
 
-		f4( j, k, k + vlen, j + vlen );
+		//f4( j, k, k + vlen, j + vlen );
+
+		// Reverse
+		//f4( k, j, j + vlen, k + vlen);
+
+		//
+
+		var s = 0;
+
+		for ( ; s < steps; s++ ) {
+
+			var slen1 = vlen * s;
+			var slen2 = vlen * ( s + 1 );
+
+			f4( j + slen1, k + slen1, k + slen2, j + slen2 );
+
+		}
+
+		//
 
 	}
 
@@ -129,13 +208,29 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 
 	function f3( a, b, c ) {
 
-		scope.faces.push( new THREE.Face3( a, b, c ) );
+		if ( reverse ) {
+
+			scope.faces.push( new THREE.Face3( c, b, a ) );
+
+		} else {
+
+			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 ) );
+		if ( reverse ) {
+
+			scope.faces.push( new THREE.Face4( d, c, b, a ) );
+
+		} else {
+
+			scope.faces.push( new THREE.Face4( a, b, c, d ) );
+
+		}
 
 	}
 

src/extras/geometries/Path.js

@@ -21,13 +21,13 @@ THREE.PathActions = {
 	LINE_TO: 'lineTo',
 	QUADRATIC_CURVE_TO: 'quadraticCurveTo', // BEZIER quadratic CURVE
 	BEZIER_CURVE_TO: 'bezierCurveTo', 		// BEZIER cubic CURVE
-	CSPLINE_TO: 'cSplineTo' 				// TODO cardinal splines
+	CSPLINE_THRU: 'splineThru' 				// TODO cardinal splines
 
 };
 
 /* Create path using straight lines to connect all points */
 
-THREE.Path.prototype.fromPoints = function( vectors ) {
+THREE.Path.prototype.fromPoints = function( vectors /*Array of Vector*/ ) {
 
 	var v = 0, vlen = vectors.length;
 
@@ -71,6 +71,15 @@ THREE.Path.prototype.bezierCurveTo = function( aCP1x, aCP1y,
 
 };
 
+THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) {
+
+	var args = Array.prototype.slice.call( arguments );
+	this.actions.push( { action: THREE.PathActions.CSPLINE_THRU, args: args } );
+
+}
+
+// TODO ARC
+
 /* Return an array of vectors based on contour of the path */
 
 THREE.Path.prototype.getPoints = function( divisions ) {
@@ -185,6 +194,25 @@ THREE.Path.prototype.getPoints = function( divisions ) {
 
 			break;
 
+		case THREE.PathActions.CSPLINE_THRU:
+
+			laste = this.actions[ i - 1 ].args;
+			var last = new THREE.Vector2( laste[ laste.length - 2 ], laste[ laste.length - 1 ] );
+			var spts = args[ 0 ];
+			var n = divisions * spts.length;
+
+			spts.unshift( last );
+
+			var spline = new Spline2();
+
+			for ( j = 0; j < n; j ++ ) {
+
+				points.push( spline.get2DPoint( spts, j / n ) ) ;
+
+			}
+
+			break;
+
 		}
 
 	}
@@ -193,6 +221,47 @@ THREE.Path.prototype.getPoints = function( divisions ) {
 
 };
 
+var Spline2 = function () {
+
+	var c = [], v2,
+		point, intPoint, weight;
+
+	this.get2DPoint = function ( points, k ) {
+
+		v2 = new THREE.Vector2();
+		point = ( points.length - 1 ) * k;
+
+		intPoint = Math.floor( point );
+		weight = point - intPoint;
+
+		c[ 0 ] = intPoint == 0 ? intPoint : intPoint - 1;
+		c[ 1 ] = intPoint;
+		c[ 2 ] = intPoint > points.length - 2 ? intPoint : intPoint + 1;
+		c[ 3 ] = intPoint > points.length - 3 ? intPoint : intPoint + 2;
+
+		v2.x = interpolate( points[ c[ 0 ] ].x, points[ c[ 1 ] ].x, points[ c[ 2 ] ].x, points[ c[ 3 ] ].x, weight );
+		v2.y = interpolate( points[ c[ 0 ] ].y, points[ c[ 1 ] ].y, points[ c[ 2 ] ].y, points[ c[ 3 ] ].y, weight );
+
+		//console.log('point',point, v2);
+
+		return v2;
+
+	}
+
+	// Catmull-Rom
+
+	function interpolate( p0, p1, p2, p3, t ) {
+
+		var v0 = ( p2 - p0 ) * 0.5;
+		var v1 = ( p3 - p1 ) * 0.5;
+		var t2 = t * t;
+		var t3 = t * t2;
+		return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
+
+	}
+
+};
+
 
 THREE.Path.prototype.getMinAndMax = function() {
 
@@ -237,12 +306,14 @@ THREE.Path.prototype.debug = function( canvas ) {
 
 	// JUST A STUB
 
+	var bounds = this.getMinAndMax();
+
 	if ( !canvas ) {
 
 		canvas = document.createElement( "canvas" );
 
-		canvas.setAttribute( 'width',  200 );
-		canvas.setAttribute( 'height', 200 );
+		canvas.setAttribute( 'width',  bounds.maxX + 100 );
+		canvas.setAttribute( 'height', bounds.maxY + 100 );
 
 		document.body.appendChild( canvas );
 
@@ -250,7 +321,7 @@ THREE.Path.prototype.debug = function( canvas ) {
 
 	var ctx = canvas.getContext( "2d" );
 	ctx.fillStyle = "white";
-	ctx.fillRect( 0, 0, 200, 200 );
+	ctx.fillRect( 0, 0, canvas.width, canvas.height );
 
 	ctx.strokeStyle = "black";
 	ctx.beginPath();
@@ -268,7 +339,11 @@ THREE.Path.prototype.debug = function( canvas ) {
 
 		// Short hand for now
 
-		ctx[ action ].apply( ctx, args );
+		if ( action != THREE.PathActions.CSPLINE_THRU ) {
+
+			ctx[ action ].apply( ctx, args );
+
+		}
 
 		/*
 		switch ( action ) {

src/extras/geometries/Shape.js

@@ -23,11 +23,19 @@ THREE.Shape.prototype.constructor = THREE.Path;
 
 THREE.Shape.prototype.triangulate = function() {
 
-	return THREE.FontUtils.Triangulate( this.getPoints(), true );
+	var pts = this.getPoints();
+
+	if ( THREE.FontUtils.Triangulate.area( pts ) > 0 ) {
+
+		pts = pts.reverse();
+
+	};
+
+	return THREE.FontUtils.Triangulate( pts, true );
 
 };
 
-/* Convenience Method to return ExtrudeGeometry */
+/* Convenience method to return ExtrudeGeometry */
 
 THREE.Shape.prototype.extrude = function( options ) {
 

src/extras/geometries/TextGeometry.js

@@ -1039,7 +1039,7 @@ THREE.FontUtils = {
 
 				//throw ( "Warning, unable to triangulate polygon!" );
 				//return null;
-
+				// Sometimes warning is fine, especially polygons are triangulated in reverse.
 				console.log( "Warning, unable to triangulate polygon!" );
 
 				if ( indices ) return vertIndices;