diff --git a/src/extras/geometries/Curve.js b/src/extras/geometries/Curve.js index f173242e..020b7454 100644 --- a/src/extras/geometries/Curve.js +++ b/src/extras/geometries/Curve.js @@ -49,7 +49,7 @@ THREE.Curve.prototype.getLengths = function(divisions) { if (!divisions) divisions = 200; if (this.cacheLengths && (this.cacheLengths.length==divisions)) { - console.log("catched",this.cacheLengths); + //console.log("catched",this.cacheLengths); return this.cacheLengths; } @@ -138,6 +138,31 @@ THREE.QuadraticBezierCurve.prototype.getPoint = function ( t /* between 0 .. 1 * 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 ) { this.x0 = x0; this.y0 = y0; @@ -155,8 +180,8 @@ THREE.CubicBezierCurve.prototype.constructor = THREE.CubicBezierCurve; THREE.CubicBezierCurve.prototype.getPoint = function ( t /* between 0 .. 1 */) { 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 ); }; @@ -193,8 +218,19 @@ THREE.SplineCurve.prototype.getPoint = function ( t /* between 0 .. 1 */) { } 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 - interpolate: function( p0, p1, p2, p3, t ) { var v0 = ( p2 - p0 ) * 0.5; diff --git a/src/extras/geometries/ExtrudeGeometry.js b/src/extras/geometries/ExtrudeGeometry.js index d80467b7..e0c08856 100644 --- a/src/extras/geometries/ExtrudeGeometry.js +++ b/src/extras/geometries/ExtrudeGeometry.js @@ -31,14 +31,23 @@ THREE.ExtrudeGeometry = function( shape, options ) { THREE.Geometry.call( this ); 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 scope = this; var bezelPoints = []; - var reverse = THREE.FontUtils.Triangulate.area( vertices ) > 0 ; + //console.log(reverse); diff --git a/src/extras/geometries/Path.js b/src/extras/geometries/Path.js index 5d959488..a3100876 100644 --- a/src/extras/geometries/Path.js +++ b/src/extras/geometries/Path.js @@ -7,7 +7,8 @@ THREE.Path = function ( points ) { this.actions = []; - + this.curves = []; + if ( points ) { this.fromPoints( points ); @@ -36,6 +37,7 @@ THREE.Path.prototype.fromPoints = function( vectors /*Array of Vector*/ ) { var v = 0, vlen = vectors.length; this.moveTo( vectors[ 0 ].x, vectors[ 0 ].y ); + for ( v = 1; v < vlen; v++ ) { @@ -60,6 +62,7 @@ THREE.Path.prototype.lineTo = function( x, y ) { var x0 = lastargs[ lastargs.length - 2 ]; var y0 = lastargs[ lastargs.length - 1 ]; 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 } ); @@ -74,6 +77,7 @@ THREE.Path.prototype.quadraticCurveTo = function( aCPx, aCPy, aX, aY ) { var y0 = lastargs[ lastargs.length - 1 ]; 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 }); //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 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, aX, aY ); + this.curves.push( 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 x0 = lastargs[ lastargs.length - 2 ]; 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 } ); //console.log(curve, curve.getPoints(), curve.getSpacedPoints()); @@ -254,16 +261,19 @@ THREE.Path.prototype.getPoints = function( divisions ) { 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; + var spts = [last]; + + var n = divisions * args[ 0 ].length; - spts.unshift( last ); + 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 ++ ) { - var spline = new Spline2(); - - for ( j = 0; j < n; j ++ ) { - - points.push( spline.get2DPoint( spts, j / n ) ) ; + points.push( spline.getPointAt( j / n ) ) ; } @@ -380,6 +390,57 @@ THREE.Path.prototype.getMinAndMax = function() { }; +// To get accurate point with reference to +// entire path distance at time t, +// following has to be done + +// 1. Length of each sub path have to be known +// 2. Locate and identify type of curve +// 3. Get t for the curve +// 4. Return curve.getPointAt(t') +THREE.Path.prototype.getPoint = function(t) { + 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 , sum+1 straight, bezier, splines, arc, funcexpr lines // Read http://www.planetclegg.com/projects/WarpingTextToSplines.html THREE.Path.prototype.transform = function(path) { diff --git a/src/extras/geometries/Shape.js b/src/extras/geometries/Shape.js index 2bd81580..a3f4e663 100644 --- a/src/extras/geometries/Shape.js +++ b/src/extras/geometries/Shape.js @@ -19,11 +19,13 @@ THREE.Shape = function ( ) { THREE.Shape.prototype = new 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() { var pts = this.getPoints(); + //var pts = this.getPoints2(); /* */ if ( THREE.FontUtils.Triangulate.area( pts ) > 0 ) { @@ -36,54 +38,65 @@ THREE.Shape.prototype.triangulate = function() { return THREE.FontUtils.Triangulate( pts, true ); }; +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; +} -THREE.Shape.prototype.triangulate2 = function(pts) { - // For Poly2Tri.js + +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 swctx = new js.poly2tri.SweepContext(shape); - /* - for (var idx in holes) - { - swctx.AddHole(holes[idx]); + //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