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

Refactored extractAllPointsWithBend() to addWrapPath() with getAllProcessedPoints()

Browse Source
This commit is contained in:
zz85
2011-08-11 15:37:37 +08:00
parent 6d6924a621
commit 3ddb5686ed
5 changed files with 117 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/webgl_geometry_text.html
+3 -2
View File
@@ -45,7 +45,7 @@
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<!-- load the font file from canvas-text -->
<!-- load the font files -->
<script type="text/javascript" src="fonts/gentilis_bold.typeface.js"></script>
<script type="text/javascript" src="fonts/gentilis_regular.typeface.js"></script>
@@ -57,7 +57,8 @@
<script type="text/javascript" src="fonts/droid/droid_sans_bold.typeface.js"></script>
<script type="text/javascript" src="fonts/droid/droid_serif_regular.typeface.js"></script>
<script type="text/javascript" src="fonts/droid/droid_serif_bold.typeface.js"></script>
<!-- todo async loader for fonts -->
<script type="text/javascript">
src/extras/geometries/Curve.js
+33 -39
View File
@@ -200,35 +200,42 @@ THREE.Curve.prototype.getUtoTmapping = function ( u, distance ) {
};
// In case any sub curves does not implements its normal finding,
// In case any sub curves does not implements its tangent / normal finding,
// we get 2 points with a small delta, and find a gradient of the 2 pts
// makes an ok approximation
// which seems to make a reasonable approximation
THREE.Curve.prototype.getNormalVector = function( t ) {
var pt1 = this.getPoint(t-0.001);
var pt2 = this.getPoint(t+0.001);
var vec = this.getTangent(t);
__vec1.sub(pt2, pt1);
return new THREE.Vector2( -__vec1.y , __vec1.x ).unit();
return new THREE.Vector2( -vec.y , vec.x );
};
THREE.Curve.prototype.getTangentUnit = function( t ) {
// Returns a unit vector tangent at t
THREE.Curve.prototype.getTangent = function( t ) {
var pt1 = this.getPoint(t-0.001);
var pt2 = this.getPoint(t+0.001);
var delta = 0.0001;
var pt1 = this.getPoint(t-delta);
var pt2 = this.getPoint(t+delta);
__vec1.sub(pt2, pt1);
return new THREE.Vector2( __vec1.x , __vec1.y ).unit();
var vec = new THREE.Vector2();
vec.sub(pt2, pt1);
return vec.unit();
};
var __vec1 = new THREE.Vector2(); // tmp Vector
/**************************************************************
* Curved Path - a curve path is simply a array of connected
* curves, but retains the api of a curve
**************************************************************/
/**************************************************************
* Line
**************************************************************/
@@ -273,18 +280,11 @@ THREE.LineCurve.prototype.getPoint = function ( t ) {
};
THREE.LineCurve.prototype.getNormalVector = function( t ) {
THREE.LineCurve.prototype.getTangent = function( t ) {
//__vec1 = new THREE.Vector2();
__vec1.sub(this.v2, this.v1);
return new THREE.Vector2( -__vec1.y , __vec1.x ).unit();
return new THREE.Vector2( __vec1.x , __vec1.y ).unit();
tx = this.x2 - this.x1;
ty = this.y2 - this.y1;
// return normal unit vector
return new THREE.Vector2( -ty , tx ).unit();
}
/**************************************************************
@@ -325,20 +325,17 @@ THREE.QuadraticBezierCurve.prototype.getPoint = function ( t ) {
tx = THREE.Shape.Utils.b2( t, this.v0.x, this.v1.x, this.v2.x );
ty = THREE.Shape.Utils.b2( t, this.v0.y, this.v1.y, this.v2.y );
// tx = THREE.Shape.Utils.b2( t, this.x0, this.x1, this.x2 );
// ty = THREE.Shape.Utils.b2( t, this.y0, this.y1, this.y2 );
return new THREE.Vector2( tx, ty );
};
THREE.QuadraticBezierCurve.prototype.getNormalVector2 = function( t ) {
THREE.QuadraticBezierCurve.prototype.getTangent = function( t ) {
// iterate sub segments
// get lengths for sub segments
// if segment is bezier
// perform subdivisions or perform integrals
// perform subdivisions
// var x0, y0, x1, y1, x2, y2;
@@ -356,8 +353,8 @@ THREE.QuadraticBezierCurve.prototype.getNormalVector2 = function( t ) {
tx = THREE.Curve.Utils.tangentQuadraticBezier( t, this.v0.x, this.v1.x, this.v2.x );
ty = THREE.Curve.Utils.tangentQuadraticBezier( t, this.v0.y, this.v1.y, this.v2.y );
// return normal unit vector
return new THREE.Vector2( -ty , tx ).unit();
// returns unit vector
return new THREE.Vector2( tx , ty ).unit();
};
@@ -405,7 +402,7 @@ THREE.CubicBezierCurve.prototype.getPoint = function ( t ) {
};
THREE.CubicBezierCurve.prototype.getNormalVector = function( t ) {
THREE.CubicBezierCurve.prototype.getTangent = function( t ) {
var tx, ty;
@@ -413,7 +410,7 @@ THREE.CubicBezierCurve.prototype.getNormalVector = function( t ) {
ty = THREE.Curve.Utils.tangentCubicBezier( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y );
// return normal unit vector
return new THREE.Vector2( -ty , tx ).unit();
return new THREE.Vector2( tx , ty ).unit();
};
@@ -507,13 +504,8 @@ THREE.Curve.Utils = {
},
//derivative
// Puay Bing, thanks for helping with this derivative!
tangentCubicBezier: function (t, p0, p1, p2, p3 ) {
// return -3 * (1 - 2*t + t*t) * p0 -
// 3 * t * (4 - 3*t) * p1 +
// 3 * t * (2 - 3*t) * p2 +
// 3 * t * t * p3;
return -3 * p0 * (1 - t) * (1 - t) +
3 * p1 * (1 - t) * (1-t) - 6 *t *p1 * (1-t) +
6 * t * p2 * (1-t) - 3 * t * t * p2 +
@@ -529,6 +521,8 @@ THREE.Curve.Utils = {
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
return h00 + h10 + h01 + h11;
},
@@ -554,8 +548,8 @@ getLengths DONE
curve.getPoints(); DONE
curve.getPointAtArcLength(t); DONE
curve.transform(params);
curve.getTangentAt(t)
curve.transform(params);
curve.getTangentAt(t); DONE
*/
/**************************************************************
src/extras/geometries/ExtrudeGeometry.js
+10 -4
View File
@@ -99,12 +99,18 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
var shapesOffset = this.vertices.length;
if (bendPath) {
shape.addWrapPath(bendPath);
//shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath );
}
var shapePoints = shape.extractAllPoints( curveSegments ); // use shape.extractAllSpacedPoints( curveSegments ) for points with equal divisions
if (bendPath) {
shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath );
}
var vertices = shapePoints.shape;
var holes = shapePoints.holes;
src/extras/geometries/Path.js
+55 -9
View File
@@ -8,6 +8,7 @@ THREE.Path = function ( points ) {
this.actions = [];
this.curves = [];
this.bends = [];
if ( points ) {
@@ -512,19 +513,50 @@ THREE.Path.prototype.createGeometry = function( points ) {
// ALL THINGS BELOW TO BE REFACTORED
// QN: Transform final pts or transform ACTIONS or add transform filters?
// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
// This returns getPoints() bend/wrapped around the contour of a path.
// Wrap path / Bend modifiers?
THREE.Path.prototype.addWrapPath = function ( bendpath ) {
this.bends.push(bendpath);
};
THREE.Path.prototype.transform = function( path, segments ) {
THREE.Path.prototype.getTransformedPoints = function( segments, bends ) {
var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints
var i, il;
if (!bends) {
bends = this.bends;
}
for (i=0, il=bends.length; i<il;i++) {
oldPts = this.getWrapPoints( oldPts, bends[i] );
}
return oldPts;
};
THREE.Path.prototype.getTransformedSpacedPoints = function( segments, bends ) {
var oldPts = this.getSpacedPoints( segments );
var i, il;
if (!bends) {
bends = this.bends;
}
for (i=0, il=bends.length; i<il;i++) {
oldPts = this.getWrapPoints( oldPts, bends[i] );
}
return oldPts;
};
THREE.Path.prototype.getWrapPoints = function (oldPts, path ) {
var bounds = this.getBoundingBox();
var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints
//console.log( path.cacheArcLengths() );
path.getLengths(400);
//segments = 40;
var i, il, p, oldX, oldY, xNorm;
@@ -553,6 +585,20 @@ THREE.Path.prototype.transform = function( path, segments ) {
}
return oldPts;
};
// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
// This returns getPoints() bend/wrapped around the contour of a path.
THREE.Path.prototype.transform = function( path, segments ) {
var bounds = this.getBoundingBox();
var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints
//console.log( path.cacheArcLengths() );
//path.getLengths(400);
//segments = 40;
return this.getWrapPoints( oldPts, path );
};
src/extras/geometries/Shape.js
+16 -24
View File
@@ -30,23 +30,14 @@ THREE.Shape.prototype.extrude = function ( options ) {
// Get points of holes
THREE.Shape.prototype.getPointsHoles = function ( divisions, bend ) {
THREE.Shape.prototype.getPointsHoles = function ( divisions ) {
var i, il = this.holes.length, holesPts = [];
for ( i = 0; i < il; i ++ ) {
if (bend) {
holesPts[ i ] = this.holes[ i ].transform( bend, divisions );
} else {
holesPts[ i ] = this.holes[ i ].getPoints( divisions );
}
holesPts[ i ] = this.holes[ i ].getTransformedPoints( divisions, this.bends );
}
@@ -62,7 +53,7 @@ THREE.Shape.prototype.getSpacedPointsHoles = function ( divisions ) {
for ( i = 0; i < il; i ++ ) {
holesPts[ i ] = this.holes[ i ].getSpacedPoints( divisions );
holesPts[ i ] = this.holes[ i ].getSpacedPoints( divisions, this.bends );
}
@@ -77,23 +68,24 @@ THREE.Shape.prototype.extractAllPoints = function ( divisions ) {
return {
shape: this.getPoints( divisions ),
shape: this.getTransformedPoints( divisions ),
holes: this.getPointsHoles( divisions )
};
};
THREE.Shape.prototype.extractAllPointsWithBend = function ( divisions, bend ) {
return {
shape: this.transform( bend, divisions ),
holes: this.getPointsHoles( divisions, bend )
};
};
//
// THREE.Shape.prototype.extractAllPointsWithBend = function ( divisions, bend ) {
//
// return {
//
// shape: this.transform( bend, divisions ),
// holes: this.getPointsHoles( divisions, bend )
//
// };
//
// };
// Get points of shape and holes (spaced by regular distance)
@@ -101,7 +93,7 @@ THREE.Shape.prototype.extractAllSpacedPoints = function ( divisions ) {
return {
shape: this.getSpacedPoints( divisions ),
shape: this.getTransformedSpacedPoints( divisions ),
holes: this.getSpacedPointsHoles( divisions )
};