home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Testing getPoints() and getSpacePoints()

Browse Source
This commit is contained in:
zz85
2011-07-16 23:19:19 +08:00
parent b287fd1d86
commit 5b59b06a67
4 changed files with 179 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/extras/geometries/Curve.js
+40 -4
View File
@@ -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;
src/extras/geometries/ExtrudeGeometry.js
+11 -2
View File
@@ -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);
src/extras/geometries/Path.js
+74 -74
View File
@@ -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
};
// Compute Lengths and Cache Them
THREE.Path.prototype.getLength = function() {
// Loop all actions/path
// Push sums into cached array
var lengths = [], sums = 0;
var i=0, il = this.curves.length, curve;
for (;i<il;i++) {
sums+= this.curves[i].getLength();
lengths.push(sums);
}
this.sums = lengths;
return sums;
};
// TODO. Test
// createPathGeometry by SolarCoordinates
/* Returns Object3D with line segments stored as children */
@@ -400,72 +461,11 @@ THREE.Path.prototype.createPathGeometry = function(divisions, lineMaterial) {
return(pathGeometry);
};
// 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();
// loop where sum != 0, sum > d , sum+1 <d
};
// Compute Lengths and Cache Them
THREE.Path.prototype.getLength = function() {
// Loop all actions/path
// Push sums into cached array
var lengths = [], sums = 0;
var i=0, il = this.actions.length, curve;
for (;i<il;i++) {
curve = this.actions[il].curve;
if (curve) {
sums += curve.getLength();
lengths.push(sums);
} else {
lengths.push(0);
}
}
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();
};
var tangentQuad = function (t, p0, p1, p2 ) {
return 2 * ( 1 - t ) * ( p1 - p0 ) + 2 * t * ( p2 - p1 ) ;
}
// FUTURE refactor path = an array of lines -> straight, bezier, splines, arc, funcexpr lines
// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
THREE.Path.prototype.transform = function(path) {
src/extras/geometries/Shape.js
+54 -41
View File
@@ -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<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;
}
};
/* Convenience method to return ExtrudeGeometry */