From 091126b2339fd3afdaf0cd74b6f390c1689202e6 Mon Sep 17 00:00:00 2001 From: zz85 Date: Wed, 10 Aug 2011 04:14:52 +0800 Subject: [PATCH 1/4] Prototype text warping to curves/splines --- src/extras/geometries/Curve.js | 107 +++++++++++++++++------ src/extras/geometries/ExtrudeGeometry.js | 10 ++- src/extras/geometries/Path.js | 32 ++++--- src/extras/geometries/Shape.js | 32 +++++-- src/extras/geometries/TextGeometry.js | 7 ++ 5 files changed, 144 insertions(+), 44 deletions(-) diff --git a/src/extras/geometries/Curve.js b/src/extras/geometries/Curve.js index f9d45d86..106cf252 100644 --- a/src/extras/geometries/Curve.js +++ b/src/extras/geometries/Curve.js @@ -91,17 +91,19 @@ THREE.Curve.prototype.getLength = function () { THREE.Curve.prototype.getLengths = function ( divisions ) { if ( !divisions ) divisions = 200; - - if ( this.cacheLengths && ( this.cacheLengths.length == divisions ) ) { + + if ( this.cacheLengths && ( this.cacheLengths.length == divisions + 1 ) ) { //console.log( "cached", this.cacheLengths ); return this.cacheLengths; } - + var cache = []; var current, last = this.getPoint( 0 ); var p, sum = 0; + + cache.push(0); for ( p = 1; p <= divisions; p++ ) { @@ -113,42 +115,89 @@ THREE.Curve.prototype.getLengths = function ( divisions ) { } this.cacheLengths = cache; + return cache; // { sums: cache, sum:sum }; Sum is in the last element. }; // Given u ( 0 .. 1 ), get a t to find p. This gives you points which are equi distance - THREE.Curve.prototype.getUtoTmapping = function ( u, distance ) { - var lengths = this.getLengths(); - var i = 0, il = lengths.length; + var arcLengths = this.getLengths(); + var i = 0, il = arcLengths.length; - var distanceForU; + var targetArcLength; // The targetted u distance value to get if ( distance ) { - distanceForU = distance; + targetArcLength = distance; } else { - distanceForU = u * lengths[ il - 1 ]; + targetArcLength = u * arcLengths[ il - 1 ]; } - // TODO Should do binary search + sub division + interpolation when needed + // // TODO Should do binary search + sub division + interpolation when needed + // time = Date.now(); + // while ( i < il ) { + // + // i++; + // + // if ( targetArcLength < arcLengths[ i ] ) break; + // + // } + // + // i--; + // console.log('o' , i, Date.now()- time); + + time = Date.now(); + // binary search for the index with largest value smaller than target u distance + var low=0, high = il-1, comparison; - while ( i < il ) { - - if ( lengths[ i ] > distanceForU ) break; - - i++; + while (low <= high) { + i = Math.floor((low + high) / 2); + comparison = arcLengths[ i ] - targetArcLength; + + if (comparison < 0) { + low = i + 1; continue; + } else if (comparison > 0) { + high = i - 1; continue; + } else { + high = i; + break; + // DONE + } + } + + i = high; + + //console.log('b' , i, low, high, Date.now()- time); + + + if (arcLengths[i] == targetArcLength) { + var t = i / (il - 1); + return t; + } + + // We could get finer grain ar lengths, or use simple interpolatation between two points + var lengthBefore = arcLengths[i]; + var lengthAfter = arcLengths[i+1]; + var segmentLength = lengthAfter - lengthBefore; + + // determine where we are between the 'before' and 'after' points. + var segmentFraction = (targetArcLength - lengthBefore) / segmentLength; + + // add that fractional amount to t + t = (i + segmentFraction) / (il -1); - var t = i / il; return t; - + + + + }; @@ -181,6 +230,14 @@ THREE.LineCurve.prototype.getPoint = function ( t ) { }; +THREE.LineCurve.prototype.getNormalVector = function( t ) { + tx = this.x2 - this.x1; + ty = this.y2 - this.y1; + + // return normal unit vector + return new THREE.Vector2( -ty , tx ).unit(); +} + /************************************************************** * Quadratic Bezier curve **************************************************************/ @@ -223,14 +280,14 @@ THREE.QuadraticBezierCurve.prototype.getNormalVector = function( t ) { 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 ]; + // 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; diff --git a/src/extras/geometries/ExtrudeGeometry.js b/src/extras/geometries/ExtrudeGeometry.js index 78b0e939..c7cf1160 100644 --- a/src/extras/geometries/ExtrudeGeometry.js +++ b/src/extras/geometries/ExtrudeGeometry.js @@ -63,6 +63,8 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) { var curveSegments = options.curveSegments !== undefined ? options.curveSegments : 12; var steps = options.steps !== undefined ? options.steps : 1; + + var bendPath = options.bendPath; var extrudePath = options.path !== undefined ? options.path : null; var extrudePts, extrudeByPath = false; @@ -98,7 +100,9 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) { var shapesOffset = this.vertices.length; var shapePoints = shape.extractAllPoints( curveSegments ); // use shape.extractAllSpacedPoints( curveSegments ) for points with equal divisions + shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); + var vertices = shapePoints.shape; var holes = shapePoints.holes; @@ -129,7 +133,11 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) { var faces = THREE.Shape.Utils.triangulateShape ( vertices, holes ); //var faces = THREE.Shape.Utils.triangulate2( vertices, holes ); - + + // shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); + // vertices = shapePoints.shape; + // holes = shapePoints.holes; + //console.log(faces); //// diff --git a/src/extras/geometries/Path.js b/src/extras/geometries/Path.js index 30da7236..f282bb96 100644 --- a/src/extras/geometries/Path.js +++ b/src/extras/geometries/Path.js @@ -517,16 +517,28 @@ THREE.Path.prototype.createGeometry = function( points ) { // 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 ) { +// This returns getPoints() bend/wrapped around the contour of a path. - path = new THREE.Path(); - path.moveTo( 0, 0 ); - path.quadraticCurveTo( 100, 20, 140, 80 ); +THREE.Path.prototype.transform = function( path, segments ) { - console.log( path.cacheArcLengths() ); + var bounds = this.getBoundingBox(); + var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints + + // path = new THREE.Path(); + // path.moveTo( 0, 0 ); + // path.quadraticCurveTo( 100, 20, 140, 80 ); + + path = new THREE.QuadraticBezierCurve( 0, 0, 150, 100, 400, 0) + //path = new THREE.QuadraticBezierCurve( 0, 0, bounds.maxX/2, 50, bounds.maxX , 0); + + //path = new THREE.LineCurve( 0, 0, 400, 0); + - var thisBounds = this.getBoundingBox(); - var oldPts = this.getPoints(); + //console.log( path.cacheArcLengths() ); + //path.getLengths(400); + //segments = 40; + + var i, il, p, oldX, oldY, xNorm; @@ -537,19 +549,19 @@ THREE.Path.prototype.transform = function( path ) { oldX = p.x; oldY = p.y; - var xNorm = oldX/ thisBounds.maxX; + var xNorm = oldX/ bounds.maxX; // If using actual distance, for length > path, requires line extrusions //xNorm = path.getUtoTmapping(xNorm, oldX); // 3 styles. 1) wrap stretched. 2) wrap stretch by arc length 3) warp by actual distance + xNorm = path.getUtoTmapping(xNorm, oldX ); + var pathPt = path.getPoint( xNorm ); var normal = path.getNormalVector( xNorm ).multiplyScalar( oldY ); p.x = pathPt.x + normal.x; p.y = pathPt.y + normal.y; - //p.x = a * oldX + b * oldY + c; - //p.y = d * oldY + e * oldX + f; } diff --git a/src/extras/geometries/Shape.js b/src/extras/geometries/Shape.js index c3701370..4cb6e135 100644 --- a/src/extras/geometries/Shape.js +++ b/src/extras/geometries/Shape.js @@ -30,14 +30,23 @@ THREE.Shape.prototype.extrude = function ( options ) { // Get points of holes -THREE.Shape.prototype.getPointsHoles = function ( divisions ) { +THREE.Shape.prototype.getPointsHoles = function ( divisions, bend ) { var i, il = this.holes.length, holesPts = []; for ( i = 0; i < il; i ++ ) { - holesPts[ i ] = this.holes[ i ].getPoints( divisions ); + if (bend) { + + holesPts[ i ] = this.holes[ i ].transform( bend, divisions ); + + } else { + + holesPts[ i ] = this.holes[ i ].getPoints( divisions ); + + } + } @@ -75,6 +84,17 @@ THREE.Shape.prototype.extractAllPoints = function ( divisions ) { }; +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) THREE.Shape.prototype.extractAllSpacedPoints = function ( divisions ) { @@ -131,16 +151,13 @@ THREE.Shape.Utils = { shortest = Number.POSITIVE_INFINITY; - // THIS THING NEEDS TO BE DONE CORRECTLY AGAIN :( - + // Find the shortest pair of pts between shape and hole // Note: Actually, I'm not sure now if we could optimize this to be faster than O(m*n) // Using distanceToSquared() intead of distanceTo() should speed a little // since running square roots operations are reduced. - // http://en.wikipedia.org/wiki/Closest_pair_of_points - // http://stackoverflow.com/questions/1602164/shortest-distance-between-points-algorithm - + for ( h2 = 0; h2 < hole.length; h2 ++ ) { pts1 = hole[ h2 ]; @@ -276,7 +293,6 @@ THREE.Shape.Utils = { verts.push( triangleb ); shape = tmpShape1.concat( tmpHole1 ).concat( tmpHole2 ).concat( tmpShape2 ); - //shape = tmpHole1.concat( tmpHole2 ); } diff --git a/src/extras/geometries/TextGeometry.js b/src/extras/geometries/TextGeometry.js index 628ad14a..4d66555c 100644 --- a/src/extras/geometries/TextGeometry.js +++ b/src/extras/geometries/TextGeometry.js @@ -49,6 +49,13 @@ THREE.TextGeometry = function ( text, parameters ) { if ( parameters.bevelThickness === undefined ) parameters.bevelThickness = 10; if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8; if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false; + + + var bend = new THREE.Path(); + bend.moveTo(0,0); + bend.quadraticCurveTo( 500, 100, 1000, 0 ); + + parameters.bendPath = bend; THREE.ExtrudeGeometry.call( this, textShapes, parameters ); From 6d6924a621dac2b4780013aa45bcf38aba6f5718 Mon Sep 17 00:00:00 2001 From: zz85 Date: Thu, 11 Aug 2011 02:07:54 +0800 Subject: [PATCH 2/4] Add bend to webgl text example --- examples/webgl_geometry_text.html | 29 +++-- src/extras/geometries/Curve.js | 140 +++++++++++++++++++---- src/extras/geometries/ExtrudeGeometry.js | 5 +- src/extras/geometries/Path.js | 17 +-- src/extras/geometries/TextGeometry.js | 30 ++++- 5 files changed, 170 insertions(+), 51 deletions(-) diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html index 5d15ae6c..a3425d73 100644 --- a/examples/webgl_geometry_text.html +++ b/examples/webgl_geometry_text.html @@ -33,6 +33,7 @@ change font, change weight, change bevel, + bend!, change postprocessing, @@ -43,13 +44,9 @@ - + - @@ -86,6 +83,7 @@ bevelSize = 1.5, bevelSegments = 3, bevelEnabled = true, + bend = true, font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif weight = "bold", // normal bold @@ -164,7 +162,7 @@ scene.addLight( dirLight ); var pointLight = new THREE.PointLight( 0xffffff, 1.5 ); - pointLight.position.set( 0, 100, 50 ); + pointLight.position.set( 0, 100, 90 ); scene.addLight( pointLight ); //text = capitalize( font ) + " " + capitalize( weight ); @@ -182,7 +180,8 @@ var weighthash = hash.substring( 7, 8 ); var pphash = hash.substring( 8, 9 ); var bevelhash = hash.substring( 9, 10 ); - var texthash = hash.substring( 11 ); + var bendhash = hash.substring( 10, 11 ); + var texthash = hash.substring( 12 ); hex = colorhash; pointLight.color.setHex( parseInt( colorhash, 16 ) ); @@ -192,6 +191,7 @@ postprocessing.enabled = parseInt( pphash ); bevelEnabled = parseInt( bevelhash ); + bend = parseInt( bendhash ); text = decodeURI( texthash ); @@ -298,6 +298,13 @@ refreshText(); }, false ); + + document.getElementById( "bend" ).addEventListener( 'click', function() { + + bend = !bend; + refreshText(); + + }, false ); document.getElementById( "postprocessing" ).addEventListener( 'click', function() { @@ -321,7 +328,8 @@ function updatePermalink() { - var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text ); + var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + + boolToNum( bend ) + "#" + encodeURI( text ); permalink.href = "#" + link; window.location.hash = link; @@ -376,7 +384,6 @@ } function createText() { - textGeo = new THREE.TextGeometry( text, { size: size, @@ -389,7 +396,9 @@ bevelThickness: bevelThickness, bevelSize: bevelSize, - bevelEnabled: bevelEnabled + bevelEnabled: bevelEnabled, + + bend: bend }); diff --git a/src/extras/geometries/Curve.js b/src/extras/geometries/Curve.js index 106cf252..c89af0da 100644 --- a/src/extras/geometries/Curve.js +++ b/src/extras/geometries/Curve.js @@ -200,13 +200,51 @@ THREE.Curve.prototype.getUtoTmapping = function ( u, distance ) { }; +// In case any sub curves does not implements its normal finding, +// we get 2 points with a small delta, and find a gradient of the 2 pts +// makes an ok approximation + +THREE.Curve.prototype.getNormalVector = function( t ) { + + var pt1 = this.getPoint(t-0.001); + var pt2 = this.getPoint(t+0.001); + + + __vec1.sub(pt2, pt1); + return new THREE.Vector2( -__vec1.y , __vec1.x ).unit(); + +}; + +THREE.Curve.prototype.getTangentUnit = function( t ) { + + var pt1 = this.getPoint(t-0.001); + var pt2 = this.getPoint(t+0.001); + + + __vec1.sub(pt2, pt1); + return new THREE.Vector2( __vec1.x , __vec1.y ).unit(); + +}; + + +var __vec1 = new THREE.Vector2(); // tmp Vector /************************************************************** * Line **************************************************************/ -THREE.LineCurve = function ( x1, y1, x2, y2 ) { + +THREE.LineCurve = function ( v1, v2 ) { + + this.v1 = v1; + this.v2 = v2; + +}; + +THREE.LineCurve.oldConstruct = function ( x1, y1, x2, y2 ) { + //instanceof THREE.Vector2 oldConstruct.apply(this); + this.x1 = x1; this.y1 = y1; @@ -219,18 +257,29 @@ THREE.LineCurve.prototype = new THREE.Curve(); THREE.LineCurve.prototype.constructor = THREE.LineCurve; THREE.LineCurve.prototype.getPoint = function ( t ) { - - var dx = this.x2 - this.x1; - var dy = this.y2 - this.y1; - - var tx = this.x1 + dx * t; - var ty = this.y1 + dy * t; - - return new THREE.Vector2( tx, ty ); + + var tmpVector = new THREE.Vector2(); + tmpVector.sub(this.v2, this.v1); + tmpVector.multiplyScalar(t); + return tmpVector; + + // var dx = this.x2 - this.x1; + // var dy = this.y2 - this.y1; + // + // var tx = this.x1 + dx * t; + // var ty = this.y1 + dy * t; + // + // return new THREE.Vector2( tx, ty ); }; THREE.LineCurve.prototype.getNormalVector = function( t ) { + + //__vec1 = new THREE.Vector2(); + __vec1.sub(this.v2, this.v1); + return new THREE.Vector2( -__vec1.y , __vec1.x ).unit(); + + tx = this.x2 - this.x1; ty = this.y2 - this.y1; @@ -242,7 +291,16 @@ THREE.LineCurve.prototype.getNormalVector = function( t ) { * Quadratic Bezier curve **************************************************************/ -THREE.QuadraticBezierCurve = function ( x0, y0, x1, y1, x2, y2 ) { + +THREE.QuadraticBezierCurve = function ( v0, v1, v2 ) { + + this.v0 = v0; + this.v1 = v1; + this.v2 = v2; + +}; + +THREE.QuadraticBezierCurve.old = function ( x0, y0, x1, y1, x2, y2 ) { this.x0 = x0; this.y0 = y0; @@ -255,6 +313,7 @@ THREE.QuadraticBezierCurve = function ( x0, y0, x1, y1, x2, y2 ) { }; + THREE.QuadraticBezierCurve.prototype = new THREE.Curve(); THREE.QuadraticBezierCurve.prototype.constructor = THREE.QuadraticBezierCurve; @@ -262,23 +321,26 @@ THREE.QuadraticBezierCurve.prototype.constructor = THREE.QuadraticBezierCurve; THREE.QuadraticBezierCurve.prototype.getPoint = function ( t ) { var tx, ty; + + 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 ); + // 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.getNormalVector = function( t ) { +THREE.QuadraticBezierCurve.prototype.getNormalVector2 = function( t ) { // iterate sub segments // get lengths for sub segments // if segment is bezier // perform subdivisions or perform integrals - var x0, y0, x1, y1, x2, y2; + // var x0, y0, x1, y1, x2, y2; // x0 = this.actions[ 0 ].args[ 0 ]; // y0 = this.actions[ 0 ].args[ 1 ]; @@ -291,8 +353,8 @@ THREE.QuadraticBezierCurve.prototype.getNormalVector = function( t ) { 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 ); + 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(); @@ -304,7 +366,16 @@ THREE.QuadraticBezierCurve.prototype.getNormalVector = function( t ) { * Cubic Bezier curve **************************************************************/ -THREE.CubicBezierCurve = function ( x0, y0, x1, y1, x2, y2, x3, y3 ) { +THREE.CubicBezierCurve = function ( v0, v1, v2, v3 ) { + + this.v0 = v0; + this.v1 = v1; + this.v2 = v2; + this.v3 = v3; + +}; + +THREE.CubicBezierCurve.old = function ( x0, y0, x1, y1, x2, y2, x3, y3 ) { this.x0 = x0; this.y0 = y0; @@ -326,14 +397,27 @@ THREE.CubicBezierCurve.prototype.constructor = THREE.CubicBezierCurve; THREE.CubicBezierCurve.prototype.getPoint = function ( t ) { var tx, ty; - - tx = THREE.Shape.Utils.b3( t, this.x0, this.x1, this.x2, this.x3 ); - ty = THREE.Shape.Utils.b3( t, this.y0, this.y1, this.y2, this.y3 ); + + tx = THREE.Shape.Utils.b3( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ); + ty = THREE.Shape.Utils.b3( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y ); return new THREE.Vector2( tx, ty ); }; +THREE.CubicBezierCurve.prototype.getNormalVector = function( t ) { + + var tx, ty; + + tx = THREE.Curve.Utils.tangentCubicBezier( t, this.v0.x, this.v1.x, this.v2.x, this.v3.x ); + 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(); + +}; + + /************************************************************** * Spline curve **************************************************************/ @@ -422,6 +506,20 @@ THREE.Curve.Utils = { return 2 * ( 1 - t ) * ( p1 - p0 ) + 2 * t * ( p2 - p1 ); }, + + //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 + + 3 * t * t * p3; + }, + tangentSpline: function ( t, p0, p1, p2, p3 ) { @@ -515,7 +613,7 @@ THREE.LineCurve3 = THREE.Curve.create( THREE.QuadraticBezierCurve3 = THREE.Curve.create( - function ( v0, v1, v2 ) { // Qn should we use 2 Vector3 instead? + function ( v0, v1, v2 ) { this.v0 = v0; this.v1 = v1; diff --git a/src/extras/geometries/ExtrudeGeometry.js b/src/extras/geometries/ExtrudeGeometry.js index c7cf1160..9af82828 100644 --- a/src/extras/geometries/ExtrudeGeometry.js +++ b/src/extras/geometries/ExtrudeGeometry.js @@ -100,7 +100,10 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) { var shapesOffset = this.vertices.length; var shapePoints = shape.extractAllPoints( curveSegments ); // use shape.extractAllSpacedPoints( curveSegments ) for points with equal divisions - shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); + + if (bendPath) { + shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); + } var vertices = shapePoints.shape; diff --git a/src/extras/geometries/Path.js b/src/extras/geometries/Path.js index f282bb96..5fd4965e 100644 --- a/src/extras/geometries/Path.js +++ b/src/extras/geometries/Path.js @@ -514,9 +514,7 @@ THREE.Path.prototype.createGeometry = function( points ) { // 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 // 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 ) { @@ -524,21 +522,9 @@ THREE.Path.prototype.transform = function( path, segments ) { var bounds = this.getBoundingBox(); var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints - // path = new THREE.Path(); - // path.moveTo( 0, 0 ); - // path.quadraticCurveTo( 100, 20, 140, 80 ); - - path = new THREE.QuadraticBezierCurve( 0, 0, 150, 100, 400, 0) - //path = new THREE.QuadraticBezierCurve( 0, 0, bounds.maxX/2, 50, bounds.maxX , 0); - - //path = new THREE.LineCurve( 0, 0, 400, 0); - - //console.log( path.cacheArcLengths() ); - //path.getLengths(400); + path.getLengths(400); //segments = 40; - - var i, il, p, oldX, oldY, xNorm; @@ -555,6 +541,7 @@ THREE.Path.prototype.transform = function( path, segments ) { //xNorm = path.getUtoTmapping(xNorm, oldX); // 3 styles. 1) wrap stretched. 2) wrap stretch by arc length 3) warp by actual distance xNorm = path.getUtoTmapping(xNorm, oldX ); + // check for out of bounds? var pathPt = path.getPoint( xNorm ); var normal = path.getNormalVector( xNorm ).multiplyScalar( oldY ); diff --git a/src/extras/geometries/TextGeometry.js b/src/extras/geometries/TextGeometry.js index 4d66555c..9b1ba171 100644 --- a/src/extras/geometries/TextGeometry.js +++ b/src/extras/geometries/TextGeometry.js @@ -50,12 +50,34 @@ THREE.TextGeometry = function ( text, parameters ) { if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8; if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false; + if ( parameters.bend ) { + + var b = textShapes[textShapes.length-1].getBoundingBox(); + var max = b.maxX; + + parameters.bendPath = new THREE.QuadraticBezierCurve( new THREE.Vector2(0, 0), + new THREE.Vector2(max/2, 120), new THREE.Vector2(max, 0)); + + } - var bend = new THREE.Path(); - bend.moveTo(0,0); - bend.quadraticCurveTo( 500, 100, 1000, 0 ); + // path = new THREE.CubicBezierCurve( new THREE.Vector2(0, 0), + // new THREE.Vector2(100, 100), new THREE.Vector2(200, 100), new THREE.Vector2(500, 0)); + // + //path = new THREE.QuadraticBezierCurve( 0, 0, bounds.maxX/2, 50, bounds.maxX , 0); - parameters.bendPath = bend; + //path = new THREE.LineCurve( 0, 0, 400, 0); + //path = new THREE.LineCurve( new THREE.Vector2(0, 0), new THREE.Vector2(400, 100)); + + // var bend = new THREE.Path(); + // bend.moveTo(0,0); + // bend.quadraticCurveTo( 500, 100, 1000, 0 ); + // + + // parameters.bendPath = path; + + + + THREE.ExtrudeGeometry.call( this, textShapes, parameters ); From 3ddb5686edbc72b34b2916e6c180c7d26ecb1415 Mon Sep 17 00:00:00 2001 From: zz85 Date: Thu, 11 Aug 2011 15:37:37 +0800 Subject: [PATCH 3/4] Refactored extractAllPointsWithBend() to addWrapPath() with getAllProcessedPoints() --- examples/webgl_geometry_text.html | 5 +- src/extras/geometries/Curve.js | 72 +++++++++++------------- src/extras/geometries/ExtrudeGeometry.js | 14 +++-- src/extras/geometries/Path.js | 64 ++++++++++++++++++--- src/extras/geometries/Shape.js | 40 ++++++------- 5 files changed, 117 insertions(+), 78 deletions(-) diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html index a3425d73..faca5c9a 100644 --- a/examples/webgl_geometry_text.html +++ b/examples/webgl_geometry_text.html @@ -45,7 +45,7 @@ - + @@ -57,7 +57,8 @@ - + +