Browse Source

Testing getPoints() and getSpacePoints()

zz85 14 years ago
parent
commit
5b59b06a67

+ 40 - 4
src/extras/geometries/Curve.js

@@ -49,7 +49,7 @@ THREE.Curve.prototype.getLengths = function(divisions) {
 	if (!divisions) divisions = 200;
 	if (!divisions) divisions = 200;
 	
 	
 	if (this.cacheLengths && (this.cacheLengths.length==divisions)) {
 	if (this.cacheLengths && (this.cacheLengths.length==divisions)) {
-		console.log("catched",this.cacheLengths);
+		//console.log("catched",this.cacheLengths);
 		return this.cacheLengths;
 		return this.cacheLengths;
 	}
 	}
 	
 	
@@ -138,6 +138,31 @@ THREE.QuadraticBezierCurve.prototype.getPoint = function ( t /* between 0 .. 1 *
 	return new THREE.Vector2( tx, ty );
 	return new THREE.Vector2( tx, ty );
 };
 };
 
 
+
+THREE.QuadraticBezierCurve.prototype.getNormalVector = function(t) {
+	// iterate sub segments
+	// 	get lengths for sub segments
+	// 	if segment is bezier
+	//		perform sub devisions or perform integrals.
+	var x0, y0, x1, y1, x2, y2;
+	x0 = this.actions[0].args[0];
+	y0 = this.actions[0].args[1];
+	x1 = this.actions[1].args[0];
+	y1 = this.actions[1].args[1];
+	x2 = this.actions[1].args[2];
+	y2 = this.actions[1].args[3];
+	
+	var tx, ty;
+	
+	tx = THREE.Curve.Utils.tangentQuadraticBezier( t, this.x0, this.x1, this.x2 );
+	ty = THREE.Curve.Utils.tangentQuadraticBezier( t, this.y0, this.y1, this.y2 );
+	
+	// return normal unit vector
+	return new THREE.Vector2( -ty , tx ).unit();
+	
+};
+
+
 THREE.CubicBezierCurve = function ( x0, y0, x1, y1, x2, y2, x3, y3 ) {
 THREE.CubicBezierCurve = function ( x0, y0, x1, y1, x2, y2, x3, y3 ) {
 	this.x0 = x0;
 	this.x0 = x0;
 	this.y0 = y0;
 	this.y0 = y0;
@@ -155,8 +180,8 @@ THREE.CubicBezierCurve.prototype.constructor = THREE.CubicBezierCurve;
 THREE.CubicBezierCurve.prototype.getPoint = function ( t /* between 0 .. 1 */) {
 THREE.CubicBezierCurve.prototype.getPoint = function ( t /* between 0 .. 1 */) {
 	var tx, ty;
 	var tx, ty;
 
 
-	tx = THREE.FontUtils.b2( t, this.x0, this.x1, this.x2 );
-	ty = THREE.FontUtils.b2( t, this.y0, this.y1, this.y2 );
+	tx = THREE.FontUtils.b3( t, this.x0, this.x1, this.x2, this.x3 );
+	ty = THREE.FontUtils.b3( t, this.y0, this.y1, this.y2, this.y3 );
 
 
 	return new THREE.Vector2( tx, ty );
 	return new THREE.Vector2( tx, ty );
 };
 };
@@ -193,8 +218,19 @@ THREE.SplineCurve.prototype.getPoint = function ( t /* between 0 .. 1 */) {
 }
 }
 
 
 THREE.Curve.Utils = {
 THREE.Curve.Utils = {
+	tangentQuadraticBezier: function (t, p0, p1, p2 ) {
+		return 2 * ( 1 - t ) * ( p1 - p0 ) + 2 * t * ( p2 - p1 ) ;
+	},
+	
+	tangentSpline: function (t, p0, p1, p2, p3) {
+		// To check if my formulas are correct
+		var h00 = 6 * t * t - 6 * t; // derived from 2t^3 − 3t^2 + 1
+		var h10 = 3 * t * t - 4 * t + 1; // t^3 − 2t^2 + t
+		var h01 = -6 * t * t + 6 * t; // − 2t3 + 3t2
+		var h11 = 3 * t * t - 2 * t;// t3 − t2
+		
+	},
 	// Catmull-Rom
 	// Catmull-Rom
-
 	interpolate: function( p0, p1, p2, p3, t ) {
 	interpolate: function( p0, p1, p2, p3, t ) {
 
 
 		var v0 = ( p2 - p0 ) * 0.5;
 		var v0 = ( p2 - p0 ) * 0.5;

+ 11 - 2
src/extras/geometries/ExtrudeGeometry.js

@@ -31,14 +31,23 @@ THREE.ExtrudeGeometry = function( shape, options ) {
 	THREE.Geometry.call( this );
 	THREE.Geometry.call( this );
 
 
     var vertices = shape.getPoints();
     var vertices = shape.getPoints();
-    var faces = shape.triangulate();
+	var reverse = THREE.FontUtils.Triangulate.area( vertices ) > 0 ;
+	if (reverse) {
+		//faces = THREE.FontUtils.Triangulate( vertices.reverse(), true );
+		vertices = vertices.reverse();
+		reverse = false;
+	}
+   // var faces = shape.triangulate();
+	
+	var faces = THREE.FontUtils.Triangulate( vertices, true );
+	
     var contour = vertices;
     var contour = vertices;
 
 
     var scope = this;
     var scope = this;
 
 
 	var bezelPoints = [];
 	var bezelPoints = [];
 
 
-	var reverse = THREE.FontUtils.Triangulate.area( vertices ) > 0 ;
+	
 
 
 	//console.log(reverse);
 	//console.log(reverse);
 
 

+ 69 - 69
src/extras/geometries/Path.js

@@ -7,7 +7,8 @@
 THREE.Path = function ( points ) {
 THREE.Path = function ( points ) {
 
 
 	this.actions = [];
 	this.actions = [];
-
+	this.curves = [];
+	
 	if ( points ) {
 	if ( points ) {
 
 
 		this.fromPoints( points );
 		this.fromPoints( points );
@@ -36,6 +37,7 @@ THREE.Path.prototype.fromPoints = function( vectors /*Array of Vector*/ ) {
 	var v = 0, vlen = vectors.length;
 	var v = 0, vlen = vectors.length;
 
 
 	this.moveTo( vectors[ 0 ].x, vectors[ 0 ].y );
 	this.moveTo( vectors[ 0 ].x, vectors[ 0 ].y );
+	
 
 
 	for ( v = 1; v < vlen; v++ ) {
 	for ( v = 1; v < vlen; v++ ) {
 
 
@@ -60,6 +62,7 @@ THREE.Path.prototype.lineTo = function( x, y ) {
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 	var curve = new THREE.StraightCurve( x0, y0, x, y );
 	var curve = new THREE.StraightCurve( x0, y0, x, y );
+	this.curves.push( curve );
 	
 	
 	this.actions.push( { action: THREE.PathActions.LINE_TO, args: args, curve:curve } );
 	this.actions.push( { action: THREE.PathActions.LINE_TO, args: args, curve:curve } );
 	
 	
@@ -74,6 +77,7 @@ THREE.Path.prototype.quadraticCurveTo = function( aCPx, aCPy, aX, aY ) {
 	var y0 = lastargs[ lastargs.length - 1 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 
 
 	var curve = new THREE.QuadraticBezierCurve( x0, y0, aCPx, aCPy, aX, aY );
 	var curve = new THREE.QuadraticBezierCurve( x0, y0, aCPx, aCPy, aX, aY );
+	this.curves.push( curve );
 	
 	
 	this.actions.push( { action: THREE.PathActions.QUADRATIC_CURVE_TO, args: args, curve:curve });
 	this.actions.push( { action: THREE.PathActions.QUADRATIC_CURVE_TO, args: args, curve:curve });
 	//console.log(curve, curve.getPoints(), curve.getSpacedPoints());
 	//console.log(curve, curve.getPoints(), curve.getSpacedPoints());
@@ -90,9 +94,10 @@ THREE.Path.prototype.bezierCurveTo = function( aCP1x, aCP1y,
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 
 
-	var curve = new THREE.QuadraticBezierCurve( x0, y0, aCP1x, aCP1y,
+	var curve = new THREE.CubicBezierCurve( x0, y0, aCP1x, aCP1y,
 	                                               aCP2x, aCP2y,
 	                                               aCP2x, aCP2y,
 	                                               aX, aY );
 	                                               aX, aY );
+	this.curves.push( curve );
 	
 	
 	this.actions.push( { action: THREE.PathActions.BEZIER_CURVE_TO, args: args, curve:curve });
 	this.actions.push( { action: THREE.PathActions.BEZIER_CURVE_TO, args: args, curve:curve });
 
 
@@ -104,9 +109,11 @@ THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) {
 	var lastargs = this.actions[ this.actions.length - 1 ].args;
 	var lastargs = this.actions[ this.actions.length - 1 ].args;
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
-
-	pts.unshift(new THREE.Vector2(x0, y0));
-	var curve = new THREE.SplineCurve( pts );
+	
+	var npts = [new THREE.Vector2(x0, y0)];
+	npts=  npts.concat(pts.unshift);
+	var curve = new THREE.SplineCurve( npts );
+	this.curves.push( curve );
 	
 	
 	this.actions.push( { action: THREE.PathActions.CSPLINE_THRU, args: args,curve:curve } );
 	this.actions.push( { action: THREE.PathActions.CSPLINE_THRU, args: args,curve:curve } );
 	//console.log(curve, curve.getPoints(), curve.getSpacedPoints());
 	//console.log(curve, curve.getPoints(), curve.getSpacedPoints());
@@ -254,16 +261,19 @@ THREE.Path.prototype.getPoints = function( divisions ) {
 
 
 			laste = this.actions[ i - 1 ].args;
 			laste = this.actions[ i - 1 ].args;
 			var last = new THREE.Vector2( laste[ laste.length - 2 ], laste[ laste.length - 1 ] );
 			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();
+			var spts = [last];
+			
+			var n = divisions * args[ 0 ].length;
 
 
-			for ( j = 0; j < n; j ++ ) {
+			spts = spts.concat(args[ 0 ]);
+			console.log(args[ 0 ].length,spts.length,args[ 0 ],spts );
+			//var spline = new Spline2();
+			
+			
+			var spline = new THREE.SplineCurve(spts);
+			for ( j = 1; j <= n; j ++ ) {
 
 
-				points.push( spline.get2DPoint( spts, j / n ) ) ;
+				points.push( spline.getPointAt( j / n ) ) ;
 
 
 			}
 			}
 
 
@@ -380,26 +390,6 @@ THREE.Path.prototype.getMinAndMax = function() {
 };
 };
 
 
 
 
-// TODO. Test
-// createPathGeometry by SolarCoordinates
-/* Returns Object3D with line segments stored as children  */
-THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) {
-    var pts = this.getPoints(divisions);
-
-    var segment, pathGeometry = new THREE.Object3D;
-    if(!lineMaterial) lineMaterial = new THREE.LineBasicMaterial( { color:0x000000, opacity:0.7 } );
-
-    for(var i=1; i<pts.length; i++) {
-        var pathSegment = new THREE.Geometry();
-        pathSegment.vertices.push( new THREE.Vertex( new THREE.Vector3( pts[i-1].x, pts[i-1].y, 0 ) ) );
-        pathSegment.vertices.push( new THREE.Vertex( new THREE.Vector3( pts[i].x, pts[i].y, 0) ) );
-        segment = new THREE.Line( pathSegment , lineMaterial );
-        pathGeometry.addChild(segment);
-    }
-
-    return(pathGeometry);
-};
-
 // To get accurate point with reference to
 // To get accurate point with reference to
 // entire path distance at time t,
 // entire path distance at time t,
 // following has to be done
 // following has to be done
@@ -410,6 +400,24 @@ THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) {
 // 4. Return curve.getPointAt(t')
 // 4. Return curve.getPointAt(t')
 THREE.Path.prototype.getPoint = function(t) {
 THREE.Path.prototype.getPoint = function(t) {
 	var d = t * this.getLength();
 	var d = t * this.getLength();
+	var curveLengths = this.sums;
+	var i =0, diff, curve;
+	
+	// To think about boundaries points.
+	while (i < curveLengths.length) {
+		if (curveLengths[i]>= d) {
+			diff = curveLengths[i] - d;
+			curve = this.curves[i];
+			var u = 1 - diff / curve.getLength();
+			
+			return curve.getPointAt(u);
+			
+			break;
+		}
+		i++;
+	}
+	
+	return null;
 	
 	
 	// loop where sum != 0, sum > d , sum+1 <d
 	// loop where sum != 0, sum > d , sum+1 <d
 };
 };
@@ -419,53 +427,45 @@ THREE.Path.prototype.getLength = function() {
 	// Loop all actions/path
 	// Loop all actions/path
 	// Push sums into cached array
 	// Push sums into cached array
 	var lengths = [], sums = 0;
 	var lengths = [], sums = 0;
-	var i=0, il = this.actions.length, curve;
+	var i=0, il = this.curves.length, curve;
 	for (;i<il;i++) {
 	for (;i<il;i++) {
-		curve = this.actions[il].curve;
-		if (curve) {
-			sums += curve.getLength();
-			lengths.push(sums);
-		} else {
-			lengths.push(0);
-		}
-		
+		sums+= this.curves[i].getLength();
+		lengths.push(sums);
 	}
 	}
+	
+	this.sums = lengths;
+	
 	return sums;
 	return sums;
 	
 	
 };
 };
 
 
-// ALL THINGS BELOW TO BE REFACTORED
-// QN: Transform final pts or transform ACTIONS or add transform filters?
 
 
-THREE.Path.prototype.getNormalVector = function(t) {
-	// iterate sub segments
-	// 	get lengths for sub segments
-	// 	if segment is bezier
-	//		perform sub devisions or perform integrals.
-	var x0, y0, x1, y1, x2, y2;
-	x0 = this.actions[0].args[0];
-	y0 = this.actions[0].args[1];
-	x1 = this.actions[1].args[0];
-	y1 = this.actions[1].args[1];
-	x2 = this.actions[1].args[2];
-	y2 = this.actions[1].args[3];
-	
-	var tx, ty;
-	
-	tx = tangentQuad( t, x0, x1, x2 );
-	ty = tangentQuad( t, y0, y1, y2 );
-	
-	// return normal
-	
-	return new THREE.Vector2( -ty , tx ).unit();
-	
+
+// TODO. Test
+// createPathGeometry by SolarCoordinates
+/* Returns Object3D with line segments stored as children  */
+THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) {
+    var pts = this.getPoints(divisions);
+
+    var segment, pathGeometry = new THREE.Object3D;
+    if(!lineMaterial) lineMaterial = new THREE.LineBasicMaterial( { color:0x000000, opacity:0.7 } );
+
+    for(var i=1; i<pts.length; i++) {
+        var pathSegment = new THREE.Geometry();
+        pathSegment.vertices.push( new THREE.Vertex( new THREE.Vector3( pts[i-1].x, pts[i-1].y, 0 ) ) );
+        pathSegment.vertices.push( new THREE.Vertex( new THREE.Vector3( pts[i].x, pts[i].y, 0) ) );
+        segment = new THREE.Line( pathSegment , lineMaterial );
+        pathGeometry.addChild(segment);
+    }
+
+    return(pathGeometry);
 };
 };
 
 
-var tangentQuad = function (t, p0, p1, p2 ) {
-	return 2 * ( 1 - t ) * ( p1 - p0 ) + 2 * t * ( p2 - p1 ) ;
-}
 
 
 
 
+// ALL THINGS BELOW TO BE REFACTORED
+// QN: Transform final pts or transform ACTIONS or add transform filters?
+
 // FUTURE refactor path = an array of lines -> straight, bezier, splines, arc, funcexpr lines
 // FUTURE refactor path = an array of lines -> straight, bezier, splines, arc, funcexpr lines
 // Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
 // Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
 THREE.Path.prototype.transform = function(path) {
 THREE.Path.prototype.transform = function(path) {

+ 54 - 41
src/extras/geometries/Shape.js

@@ -19,11 +19,13 @@ THREE.Shape = function ( ) {
 THREE.Shape.prototype = new THREE.Path();
 THREE.Shape.prototype = new THREE.Path();
 THREE.Shape.prototype.constructor = THREE.Path;
 THREE.Shape.prototype.constructor = THREE.Path;
 
 
-/* Returns vertices of triangulated faces | get faces */
 
 
+/* TODO. Get rid of this */
+/* Returns vertices of triangulated faces | get faces */
 THREE.Shape.prototype.triangulate = function() {
 THREE.Shape.prototype.triangulate = function() {
 	
 	
 	var pts = this.getPoints();
 	var pts = this.getPoints();
+	//var pts = this.getPoints2();
 	
 	
 	/* */
 	/* */
 	if ( THREE.FontUtils.Triangulate.area( pts ) > 0 ) {
 	if ( THREE.FontUtils.Triangulate.area( pts ) > 0 ) {
@@ -36,54 +38,65 @@ THREE.Shape.prototype.triangulate = function() {
 	return THREE.FontUtils.Triangulate( pts, true );
 	return THREE.FontUtils.Triangulate( pts, true );
 };
 };
 
 
-
-THREE.Shape.prototype.triangulate2 = function(pts) {
-	// For Poly2Tri.js 
-	
-	//var pts = this.getPoints();
-	var shape = [];
-	for (var p in pts) {
-		shape.push(new js.poly2tri.Point(pts[p].x, pts[p].y))
+THREE.Shape.prototype.getSpacedPoints = function(divisions) {
+	if (!divisions) divisions = 40;
+	var pts = [];
+	for (var i=0; i< divisions;i++) {
+		pts.push(this.getPoint(i/divisions));
 	}
 	}
+	//console.log(pts);
+	return pts;
+}
+
 
 
-	var swctx = new js.poly2tri.SweepContext(shape);
-	/*
-		for (var idx in holes)
-		{
-			swctx.AddHole(holes[idx]);
+THREE.Shape.Utils = {
+	triangulate2 : function(pts) {
+		// For Poly2Tri.js 
+	
+		//var pts = this.getPoints();
+		var shape = [];
+		for (var p in pts) {
+			shape.push(new js.poly2tri.Point(pts[p].x, pts[p].y))
 		}
 		}
-	*/
-	var find;
-	var findIndexForPt = function (pt) {
-		find = new THREE.Vector2(pt.x, pt.y);
-		var p;
-		for (p=0, pl = pts.length; p<pl; p++) {
-			if (pts[p].equals(find)) return p;
+
+		var swctx = new js.poly2tri.SweepContext(shape);
+		/*
+			for (var idx in holes)
+			{
+				swctx.AddHole(holes[idx]);
+			}
+		*/
+		var find;
+		var findIndexForPt = function (pt) {
+			find = new THREE.Vector2(pt.x, pt.y);
+			var p;
+			for (p=0, pl = pts.length; p<pl; p++) {
+				if (pts[p].equals(find)) return p;
+			}
+			return -1;
+		};
+		// triangulate
+		js.poly2tri.sweep.Triangulate(swctx);
+
+		var triangles =  swctx.GetTriangles();
+		var tr ;
+		var facesPts = [];
+		for (var t in triangles) {
+			tr =  triangles[t];
+			facesPts.push([
+				findIndexForPt(tr.GetPoint(0)), 
+				findIndexForPt(tr.GetPoint(1)), 
+				findIndexForPt(tr.GetPoint(2))
+					]); 
 		}
 		}
-		return -1;
-	};
-	// triangulate
-	js.poly2tri.sweep.Triangulate(swctx);
-
-	var triangles =  swctx.GetTriangles();
-	var tr ;
-	var facesPts = [];
-	for (var t in triangles) {
-		tr =  triangles[t];
-		facesPts.push([
-			findIndexForPt(tr.GetPoint(0)), 
-			findIndexForPt(tr.GetPoint(1)), 
-			findIndexForPt(tr.GetPoint(2))
-				]); 
-	}
 
 
 
 
-	console.log(facesPts);
-	console.log("triangles", triangles.length, triangles);
+		console.log(facesPts);
+		console.log("triangles", triangles.length, triangles);
 
 
-	// Returns array of faces with 3 element each
+		// Returns array of faces with 3 element each
 	return facesPts;
 	return facesPts;
-
+	}
 	
 	
 };
 };
 /* Convenience method to return ExtrudeGeometry */
 /* Convenience method to return ExtrudeGeometry */