Added path.createSpacedPointsGeometry() and extended shapes example to show...

Added path.createSpacedPointsGeometry() and extended shapes example to show such equidistantly sampled paths.

Spaced points are magic that will eventually make objects follow paths with constant speed.

build/Three.js

@@ -437,12 +437,13 @@ THREE.Path.prototype.lineTo=function(b,c){var e=Array.prototype.slice.call(argum
 THREE.Path.prototype.quadraticCurveTo=function(b,c,e,f){var g=Array.prototype.slice.call(arguments),j=this.actions[this.actions.length-1].args,j=new THREE.QuadraticBezierCurve(j[j.length-2],j[j.length-1],b,c,e,f);this.curves.push(j);this.actions.push({action:THREE.PathActions.QUADRATIC_CURVE_TO,args:g,curve:j})};
 THREE.Path.prototype.bezierCurveTo=function(b,c,e,f,g,j){var h=Array.prototype.slice.call(arguments),m=this.actions[this.actions.length-1].args,m=new THREE.CubicBezierCurve(m[m.length-2],m[m.length-1],b,c,e,f,g,j);this.curves.push(m);this.actions.push({action:THREE.PathActions.BEZIER_CURVE_TO,args:h,curve:m})};
 THREE.Path.prototype.splineThru=function(b){var c=Array.prototype.slice.call(arguments),e=this.actions[this.actions.length-1].args,e=[new THREE.Vector2(e[e.length-2],e[e.length-1])],e=e.concat(b),e=new THREE.SplineCurve(e);this.curves.push(e);this.actions.push({action:THREE.PathActions.CSPLINE_THRU,args:c,curve:e})};
-THREE.Path.prototype.arc=function(b,c,e,f,g,j){var h=Array.prototype.slice.call(arguments);this.curves.push(new THREE.ArcCurve(b,c,e,f,g,j));this.actions.push({action:THREE.PathActions.ARC,args:h})};THREE.Path.prototype.getSpacedPoints=function(b){b||(b=40);for(var c=[],e=0;e<b;e++)c.push(this.getPoint(e/b));return c};
+THREE.Path.prototype.arc=function(b,c,e,f,g,j){var h=Array.prototype.slice.call(arguments);this.curves.push(new THREE.ArcCurve(b,c,e,f,g,j));this.actions.push({action:THREE.PathActions.ARC,args:h})};THREE.Path.prototype.getSpacedPoints=function(b,c){b||(b=40);for(var e=[],f=0;f<b;f++)e.push(this.getPoint(f/b));c&&e.push(e[0]);return e};
 THREE.Path.prototype.getPoints=function(b,c){var b=b||12,e=[],f,g,j,h,m,n,p,o,t,u,v,x,w;f=0;for(g=this.actions.length;f<g;f++)switch(j=this.actions[f],h=j.action,j=j.args,h){case THREE.PathActions.LINE_TO:e.push(new THREE.Vector2(j[0],j[1]));break;case THREE.PathActions.QUADRATIC_CURVE_TO:m=j[2];n=j[3];t=j[0];u=j[1];e.length>0?(h=e[e.length-1],v=h.x,x=h.y):(h=this.actions[f-1].args,v=h[h.length-2],x=h[h.length-1]);for(h=1;h<=b;h++)w=h/b,j=THREE.FontUtils.b2(w,v,t,m),w=THREE.FontUtils.b2(w,x,u,n),
 e.push(new THREE.Vector2(j,w));break;case THREE.PathActions.BEZIER_CURVE_TO:m=j[4];n=j[5];t=j[0];u=j[1];p=j[2];o=j[3];e.length>0?(h=e[e.length-1],v=h.x,x=h.y):(h=this.actions[f-1].args,v=h[h.length-2],x=h[h.length-1]);for(h=1;h<=b;h++)w=h/b,j=THREE.FontUtils.b3(w,v,t,p,m),w=THREE.FontUtils.b3(w,x,u,o,n),e.push(new THREE.Vector2(j,w));break;case THREE.PathActions.CSPLINE_THRU:h=this.actions[f-1].args;h=[new THREE.Vector2(h[h.length-2],h[h.length-1])];w=b*j[0].length;h=h.concat(j[0]);j=new THREE.SplineCurve(h);
 for(h=1;h<=w;h++)e.push(j.getPointAt(h/w));break;case THREE.PathActions.ARC:h=this.actions[f-1].args;m=j[0];n=j[1];p=j[2];t=j[3];w=j[4];u=!!j[5];o=h[h.length-2];v=h[h.length-1];h.length==0&&(o=v=0);x=w-t;var B=b*2;for(h=1;h<=B;h++)w=h/B,u||(w=1-w),w=t+w*x,j=o+m+p*Math.cos(w),w=v+n+p*Math.sin(w),e.push(new THREE.Vector2(j,w))}c&&e.push(e[0]);return e};
 THREE.Path.prototype.getMinAndMax=function(){var b=this.getPoints(),c,e,f,g;c=e=Number.NEGATIVE_INFINITY;f=g=Number.POSITIVE_INFINITY;var j,h,m;h=0;for(m=b.length;h<m;h++){j=b[h];if(j.x>c)c=j.x;else if(j.x<f)f=j.x;if(j.y>e)e=j.y;else if(j.y<e)g=j.y}return{minX:f,minY:g,maxX:c,maxY:e}};THREE.Path.prototype.getPoint=function(b){for(var c=b*this.getLength(),e=this.sums,b=0;b<e.length;){if(e[b]>=c)return c=e[b]-c,b=this.curves[b],c=1-c/b.getLength(),b.getPointAt(c);b++}return null};
-THREE.Path.prototype.getLength=function(){var b=[],c=0,e,f=this.curves.length;for(e=0;e<f;e++)c+=this.curves[e].getLength(),b.push(c);this.sums=b;return c};THREE.Path.prototype.createPointsGeometry=function(b){for(var b=this.getPoints(b,!0),c=new THREE.Geometry,e=0;e<b.length;e++)c.vertices.push(new THREE.Vertex(new THREE.Vector3(b[e].x,b[e].y,0)));return c};
+THREE.Path.prototype.getLength=function(){var b=[],c=0,e,f=this.curves.length;for(e=0;e<f;e++)c+=this.curves[e].getLength(),b.push(c);this.sums=b;return c};THREE.Path.prototype.createPointsGeometry=function(b){return this.createGeometry(this.getPoints(b,!0))};THREE.Path.prototype.createSpacedPointsGeometry=function(b){return this.createGeometry(this.getSpacedPoints(b,!0))};
+THREE.Path.prototype.createGeometry=function(b){for(var c=new THREE.Geometry,e=0;e<b.length;e++)c.vertices.push(new THREE.Vertex(new THREE.Vector3(b[e].x,b[e].y,0)));return c};
 THREE.Path.prototype.transform=function(b){b=new THREE.Path;b.moveTo(0,0);b.quadraticCurveTo(100,20,140,80);console.log(b.cacheArcLengths());var c=this.getMinAndMax(),e=this.getPoints(),f,g,j,h,m,n;f=0;for(g=e.length;f<g;f++)j=e[f],h=j.x,m=j.y,n=h/c.maxX,h=b.getPoint(n),m=b.getNormalVector(n).multiplyScalar(m),j.x=h.x+m.x,j.y=h.y+m.y;return e};
 THREE.Path.prototype.nltransform=function(b,c,e,f,g,j){var h=this.getPoints(),m,n,p,o,t;m=0;for(n=h.length;m<n;m++)p=h[m],o=p.x,t=p.y,p.x=b*o+c*t+e,p.y=f*t+g*o+j;return h};
 THREE.Path.prototype.debug=function(b){var c=this.getMinAndMax();b||(b=document.createElement("canvas"),b.setAttribute("width",c.maxX+100),b.setAttribute("height",c.maxY+100),document.body.appendChild(b));c=b.getContext("2d");c.fillStyle="white";c.fillRect(0,0,b.width,b.height);c.strokeStyle="black";c.beginPath();var e,f,g,b=0;for(e=this.actions.length;b<e;b++)f=this.actions[b],g=f.args,f=f.action,f!=THREE.PathActions.CSPLINE_THRU&&c[f].apply(c,g);c.stroke();c.closePath();c.strokeStyle="red";f=this.transform(0.866,

examples/webgl_geometry_shapes.html

@@ -71,7 +71,9 @@
 				parent.position.y = 50;
 				scene.addChild( parent );
 
-				function addGeometry( geometry, points, color, x, y, z, rx, ry, rz, s ) {
+				function addGeometry( geometry, points, spacedPoints, color, x, y, z, rx, ry, rz, s ) {
+
+					// 3d shape
 
 					var mesh = new THREE.Mesh( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } ) ] );
 					mesh.position.set( x, y, z - 75 );
@@ -79,29 +81,51 @@
 					mesh.scale.set( s, s, s );
 					parent.addChild( mesh );
 
+					// solid line
+
 					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 2 } ) );
 					line.position.set( x, y, z + 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
 					parent.addChild( line );
 
-					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, opacity: 0.2 } ) );
+					// transparent line from real points
+
+					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, opacity: 0.5 } ) );
 					line.position.set( x, y, z + 75 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
 					parent.addChild( line );
 
+					// vertices from real points
+
 					var pgeo = THREE.GeometryUtils.clone( points );
-					var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2,opacity: 0.5 } ) );
+					var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.75 } ) );
 					particles.position.set( x, y, z + 75 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
 					parent.addChild( particles );
 
+					// transparent line from equidistance sampled points
+
+					var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, opacity: 0.2 } ) );
+					line.position.set( x, y, z + 100 );
+					line.rotation.set( rx, ry, rz );
+					line.scale.set( s, s, s );
+					parent.addChild( line );
+
+					// equidistance sampled points
+
+					var pgeo = THREE.GeometryUtils.clone( spacedPoints );
+					var particles2 = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.5 } ) );
+					particles2.position.set( x, y, z + 100 );
+					particles2.rotation.set( rx, ry, rz );
+					particles2.scale.set( s, s, s );
+					parent.addChild( particles2 );
+
 				}
 
-				var lineDivisions = 12, lineMaterial = new THREE.LineBasicMaterial( { color: 0xff0000 } );
-				var extrudeSettings = {	amount: 20,  bevelEnabled: true, bevelSegments: 2, steps: 2 }; //amount: 40, steps: 2
+				var extrudeSettings = {	amount: 20,  bevelEnabled: true, bevelSegments: 2, steps: 2 }; // amount: 40, steps: 2
 
 				// California
 
@@ -131,8 +155,10 @@
 				californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
 
 				var californiaShape = new THREE.Shape( californiaPts );
+
 				var california3d = new THREE.ExtrudeGeometry( californiaShape, { amount: 20	} );
 				var californiaPoints = californiaShape.createPointsGeometry();
+				var californiaSpacedPoints = californiaShape.createSpacedPointsGeometry( 100 );
 
 				// Triangle
 
@@ -144,6 +170,7 @@
 
 				var triangle3d = triangleShape.extrude( extrudeSettings );
 				var trianglePoints = triangleShape.createPointsGeometry();
+				var triangleSpacedPoints = triangleShape.createSpacedPointsGeometry();
 
 
 				// Heart
@@ -162,6 +189,7 @@
 
 				var heart3d = heartShape.extrude( extrudeSettings );
 				var heartPoints = heartShape.createPointsGeometry();
+				var heartSpacedPoints = heartShape.createSpacedPointsGeometry();
 
 				//heartShape.debug( document.getElementById("debug") );
 
@@ -178,6 +206,7 @@
 
 				var square3d = squareShape.extrude( extrudeSettings );
 				var squarePoints = squareShape.createPointsGeometry();
+				var squareSpacedPoints = squareShape.createSpacedPointsGeometry();
 
 				// Rectangle
 
@@ -192,6 +221,7 @@
 
 				var rect3d = rectShape.extrude( extrudeSettings );
 				var rectPoints = rectShape.createPointsGeometry();
+				var rectSpacedPoints = rectShape.createSpacedPointsGeometry();
 
 				// Rounded rectangle
 
@@ -200,6 +230,7 @@
 
 				var roundedRect3d = roundedRectShape.extrude( extrudeSettings );
 				var roundedRectPoints = roundedRectShape.createPointsGeometry();
+				var roundedRectSpacedPoints = roundedRectShape.createSpacedPointsGeometry();
 
 				function roundedRect( ctx, x, y, width, height, radius ){
 
@@ -227,6 +258,7 @@
 
 				var circle3d = circleShape.extrude( extrudeSettings );
 				var circlePoints = circleShape.createPointsGeometry();
+				var circleSpacedPoints = circleShape.createSpacedPointsGeometry();
 
 				// Fish
 
@@ -243,6 +275,7 @@
 
 				var fish3d = fishShape.extrude( extrudeSettings );
 				var fishPoints = fishShape.createPointsGeometry();
+				var fishSpacedPoints = fishShape.createSpacedPointsGeometry();
 
 				// Arc circle
 
@@ -257,6 +290,7 @@
 
 				var arc3d = arcShape.extrude( extrudeSettings );
 				var arcPoints = arcShape.createPointsGeometry();
+				var arcSpacedPoints = arcShape.createSpacedPointsGeometry();
 
 				// Spline shape + path extrusion
 
@@ -284,16 +318,17 @@
 
 				var splineShape3d = splineShape.extrude( extrudeSettings );
 				var splinePoints = splineShape.createPointsGeometry( );
-
-				addGeometry( california3d, californiaPoints,	0xffaa00, -300, -100, 0,     0, 0, 0, 0.25 );
-				addGeometry( triangle3d, trianglePoints,		0xffee00, -180,    0, 0,     0, 0, 0, 1 );
-				addGeometry( roundedRect3d, roundedRectPoints, 	0x005500, -150,  150, 0,     0, 0, 0, 1 );
-				addGeometry( square3d, squarePoints,			0x0055ff,  150,  100, 0,     0, 0, 0, 1 );
-				addGeometry( heart3d, heartPoints,				0xff1100,    0,  100, 0,   3.14, 0, 0, 1 );
-				addGeometry( circle3d, circlePoints,			0x00ff11,  120,  250, 0,     0, 0, 0, 1 );
-				addGeometry( fish3d, fishPoints,				0x222222,  -50,  200, 0,     0, 0, 0, 1 );
-				addGeometry( splineShape3d, splinePoints, 		0x888888,  -50,  -100, -50,  0, 0, 0, 0.2 );
-				addGeometry( arc3d, arcPoints,					0xbb4422,  150,    0, 0,     0, 0, 0, 1 );
+				var splineSpacedPoints = splineShape.createSpacedPointsGeometry( );
+
+				addGeometry( california3d, californiaPoints, californiaSpacedPoints,	0xffaa00, -300, -100, 0,     0, 0, 0, 0.25 );
+				addGeometry( triangle3d, trianglePoints, triangleSpacedPoints, 			0xffee00, -180,    0, 0,     0, 0, 0, 1 );
+				addGeometry( roundedRect3d, roundedRectPoints, roundedRectSpacedPoints,	0x005500, -150,  150, 0,     0, 0, 0, 1 );
+				addGeometry( square3d, squarePoints, squareSpacedPoints,				0x0055ff,  150,  100, 0,     0, 0, 0, 1 );
+				addGeometry( heart3d, heartPoints, heartSpacedPoints,					0xff1100,    0,  100, 0,   3.14, 0, 0, 1 );
+				addGeometry( circle3d, circlePoints, circleSpacedPoints,				0x00ff11,  120,  250, 0,     0, 0, 0, 1 );
+				addGeometry( fish3d, fishPoints, fishSpacedPoints,						0x222222,  -50,  200, 0,     0, 0, 0, 1 );
+				addGeometry( splineShape3d, splinePoints, splineSpacedPoints,			0x888888,  -50,  -100, -50,  0, 0, 0, 0.2 );
+				addGeometry( arc3d, arcPoints, arcSpacedPoints,							0xbb4422,  150,    0, 0,     0, 0, 0, 1 );
 
 				//
 

src/extras/geometries/Path.js

@@ -165,21 +165,27 @@ THREE.Path.prototype.arc = function ( aX, aY, aRadius,
 */
 
 
-THREE.Path.prototype.getSpacedPoints = function ( divisions ) {
+THREE.Path.prototype.getSpacedPoints = function ( divisions, closedPath ) {
 
 	if ( !divisions ) divisions = 40;
 
-	var pts = [];
+	var points = [];
+
 	for ( var i = 0; i < divisions; i++ ) {
 
-		pts.push( this.getPoint( i / divisions ) );
+		points.push( this.getPoint( i / divisions ) );
 
-		//if(!this.getPoint(i/divisions)) throw "DIE";
+		//if( !this.getPoint( i / divisions ) ) throw "DIE";
 
 	}
 
-	//console.log(pts);
-	return pts;
+	if ( closedPath ) {
+
+		points.push( points[ 0 ] );
+
+	}
+
+	return points;
 
 };
 
@@ -481,17 +487,31 @@ THREE.Path.prototype.getLength = function() {
 };
 
 
-/// Returns geometry created from path points (for Line or ParticleSystem objects)
+/// Generate geometry from path points (for Line or ParticleSystem objects)
 
 THREE.Path.prototype.createPointsGeometry = function( divisions ) {
 
     var pts = this.getPoints( divisions, true );
+	return this.createGeometry( pts );
+
+};
+
+// Generate geometry from equidistance sampling along the path
+
+THREE.Path.prototype.createSpacedPointsGeometry = function( divisions ) {
+
+    var pts = this.getSpacedPoints( divisions, true );
+	return this.createGeometry( pts );
+
+};
+
+THREE.Path.prototype.createGeometry = function( points ) {
 
 	var geometry = new THREE.Geometry();
 
-    for( var i = 0; i < pts.length; i ++ ) {
+    for( var i = 0; i < points.length; i ++ ) {
 
-        geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( pts[ i ].x, pts[ i ].y, 0 ) ) );
+        geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( points[ i ].x, points[ i ].y, 0 ) ) );
 
     }
 
@@ -500,7 +520,6 @@ THREE.Path.prototype.createPointsGeometry = function( divisions ) {
 };
 
 
-
 // ALL THINGS BELOW TO BE REFACTORED
 // QN: Transform final pts or transform ACTIONS or add transform filters?