Add bend to webgl text example

examples/webgl_geometry_text.html

@@ -33,6 +33,7 @@
 			<span class="button" id="font">change font</span>,
 			<span class="button" id="weight">change weight</span>,
 			<span class="button" id="bevel">change bevel</span>,
+			<span class="button" id="bend">bend!</span>,
 			<span class="button" id="postprocessing">change postprocessing</span>,
 			<a id="permalink" href="#">permalink</a>
 		</div>
@@ -43,13 +44,9 @@
 		<script type="text/javascript" src="js/Detector.js"></script>
 		<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 -->
 
-		<!--
-
-
-		-->
 		<script type="text/javascript" src="fonts/gentilis_bold.typeface.js"></script>
 		<script type="text/javascript" src="fonts/gentilis_regular.typeface.js"></script>
 		<script type="text/javascript" src="fonts/optimer_bold.typeface.js"></script>
@@ -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
 
 				});
 

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;

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;

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 );

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));
+		
+	}
+	
+	// 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);
+	
+	//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 );
+	// 
 	
-	var bend = new THREE.Path();
-	bend.moveTo(0,0);
-	bend.quadraticCurveTo( 500, 100, 1000, 0 );
+	// parameters.bendPath = path;
 	
-	parameters.bendPath = bend;
+	
+
+
 
 	THREE.ExtrudeGeometry.call( this, textShapes, parameters );