Right after the Mirror class, A new addition to the Away3D library: The PathExtrude class.
The PathExtrude class projects any profile defined by Number3D's on a given Path. Capital P to Path, because it's also a new comer to the library. (This one will do much more later on...)
This class allows you to generate phone cords, cable, handwrited letters, ribbons, race tracks, handles etc... in just a few lines and like all the others: no third party 3d app required.
However if you play a bit with it, you'll soon realize you'll need to find/write a generator for the path information, doing it by hand would be very tedious if the path is extended. But for anyone that have already traced curve using the Flash API, will know exactly what I mean.
The demo's are speaking for themselves... here just a few examples with some code.
The first thing is to define a profile:
var aPoints = []; //here a U form aPoints.push(new Number3D(-100, 0, 0)); aPoints.push(new Number3D(-50, 0, 0)); aPoints.push(new Number3D(-50, -50, 0)); aPoints.push(new Number3D(0, -50, 0)); aPoints.push(new Number3D(50, -50, 0)); aPoints.push(new Number3D(50, 0, 0)); aPoints.push(new Number3D(100, 0, 0));
Then declare a Path instance, and define the CurveSegments
import away3d.animators.data.Path;
var aPath:Path = new Path([ new Number3D(-400, 0, -150),new Number3D(-200, 300, 0), new Number3D(0,0,0), null, new Number3D(200, -300, 0), new Number3D(400, 0, 0), null, new Number3D(600, 300, 0), new Number3D(800, 0, 0), null, new Number3D(1000, -300, 0), new Number3D(1200, 0, 150) ]);
The order of the array is v0, va (anchor), v1. You would do the same to define a curve in Flash (curveTo()).
note: the null is there to save the typing since it's the v1 from previous CurveSegment.
You can define the world axis as well, needed for the directional vector to align properly your profile.
default is 0,1,0. Depending on the profile orientation, you might need to set it.
aPath.worldAxis = new Number3D(0,0,1);
You then just pass it all this to the class
var pathextrude:PathExtrude=
new PathExtrude(aPath, aPoints, null, {flip:false, aligntopath:true,
coverall:true, scaling:2, closepath:false, recenter:true,
material:mat, subdivision:6, bothsides:false});
//showtime
this.scene.addChild(pathextrude);
Done!
There is a cool addon too, you can influence the Path CurveSegments by passing a series of Number3D's for the scale of the profile along the path at each points. By default it's being smoothed from startscale to endscale per segment, if you set the property smoothscale to false, it will equally scale the whole segment.
This is especially handy when it comes to build complex shapes like a bike frame, a thea cup handle or even a spoon...
//scale variation var aScale = []; aScale.push(new Number3D(1, 1, 1)); aScale.push(new Number3D(2, 1, 2)); aScale.push(new Number3D(2, 1, 2)); aScale.push(new Number3D(3, 1, 3));
The scales array is applied one by one on following same indexes as the Path CurveSegments, so you can pass less scale modifiers than path segments. For instance if you would want to affect only the beginning of the mesh generation.
Here we pass the scales array this time.
var pathextrude:PathExtrude =
new PathExtrude(aPath, aPoints, aScale, {smoothscale:true, flip:false,
aligntopath:true, coverall:true, scaling:2, closepath:false,
recenter:true, material:mat, subdivision:6, bothsides:true});
Same code with some scale changes, this time we set the smoothscale property to false.
As you can see the scale changes are only set to the segments. No matter how high the subdivision is.
var pathextrude:PathExtrude =
new PathExtrude(aPath, aPoints, aScale, {smoothscale:false,
flip:false, aligntopath:true, coverall:true, scaling:2,
closepath:false, recenter:true, material:mat,
subdivision:10, bothsides:true});
In this example, we pass only the profile, and set it on the path but we do not pass scales modifiers and the property alignToPath is set to false. The profile is set on the path but no directional rotation is done. And you get a nice ribbon.I've set the bothsides property to flase so you can see how nice the curve is.
var pathextrude:PathExtrude =
new PathExtrude(aPath, aPoints, null, {aligntopath:false, coverall:true,
scaling:1, recenter:true, material:mat, subdivision:10,
bothsides:false});
Here another variation, this time the middle object is a straight path, and I pass a star like profile. This is something you would not be able to do with the Lathe class. You could do it with the Skin class. But if i would want to bend the shape, then this class only would give you the right shape.
The path generated for the second object has now an extrude as "ribbon": the align to path is set to false.
I could make tons of demos since almost each output generates an interesting shape, so one last example. Same path as the first demos, except this time I pass a circle like profile. And what do we get here? A nice cord!
This class is in the Away3D trunk. I can wait see what you guys will do with this one!
June 15th, 2008 at 8:38 am
very nice!
June 26th, 2008 at 6:23 am
Would like to thank you for such a grear resource of info. The examples look great and coming over from trying papervision this is a blow of fresh air. Great stuff.
July 2nd, 2008 at 2:13 am
hi, is Path not in the latest code release of 2.1.0 ?
I used this
away3d.animators.data.Path
and got this -
1046: Type was not found or was not a compile-time constant: Path.
July 2nd, 2008 at 4:29 am
Very cool! It may come in handy for some things I’m planning in a game I’m making. I’m a bit confused as to how to apply an explicit rotation inside the path.
July 2nd, 2008 at 9:38 am
Jacob,
it’s in the svn in the main trunk, it will be part of the 2.2 tag. the latest classes are allways added to the main trunk, so everyone can test/report bugs/ask for extra features etc… Then it joins the official tags when the next official release is done. The documentation is then updated too.
Larry B.
no that’s the nice thing, once you have defined the profile and eventually worldaxis, the rotations are applied for you automatically along the path.
The latest update also include a Path smooth handler, so if you pass random points, you can fill the path, then smooth it, the result is very nice curves without the need to edit by hand. Of course since its based on neighbour coordinates, it’s not as accurate as done by hand but it looks very nice. I might do a little post on this one.
July 4th, 2008 at 2:28 am
Paths have an unpleasant side-effect of going upside-down when I don’t want them to. That’s why I asked if you could do explicit rotation, like a rotation array. I want to make a wall that wraps around a geometric torus, but even if I wanted to make a little wall-ring around the minor radius, it wouldn’t do the bottom side. I think something may be wrong with the negative stuff or something. The following code acts strangely:
import away3d.containers.*;
import away3d.core.base.*;
import away3d.materials.ColorMaterial;
import away3d.animators.data.Path;
import away3d.animators.data.CurveSegment;
import away3d.extrusions.PathExtrude;
import away3d.core.math.Number3D;
var view:View3D=new View3D({x:stage.stageWidth/2, y:stage.stageHeight/2});
addChild(view);
var mat:ColorMaterial=new ColorMaterial(0×666666);
var aPoints:Array = [];
aPoints.push(new Number3D(0,0,-5));
aPoints.push(new Number3D(0,50,-5));
aPoints.push(new Number3D(0,50,5));
aPoints.push(new Number3D(0,0,5));
aPoints.push(new Number3D(0,0,-5));
var a:Number = Math.tan(Math.PI/8);
var r:Number=50;
var cx,cy,endx,endy:Number;
endx=r*Math.cos(45*Math.PI/180);
endy=r*Math.sin(45*Math.PI/180);
cx=endx + r*a*Math.cos((45-90)*Math.PI/180);
cy=endy + r*a*Math.sin((45-90)*Math.PI/180);
var aPath:Path =new Path([new Number3D(50,0,0),new Number3D(cx,cy,0),new Number3D(endx,endy,0)]);
var h:Number3D;
for (var angle:int = 90; angle<=360; angle += 45) {
endx = r*Math.cos(angle*Math.PI/180);
endy = r*Math.sin(angle*Math.PI/180);
cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
h=(angle==45)?new Number3D(50,0,0):null;
aPath.add(new CurveSegment(h,new Number3D(cx,cy,0),new Number3D(endx,endy,0)));
}
aPath.worldAxis = new Number3D(0,1,0);
var pathextrude:PathExtrude= new PathExtrude(aPath, aPoints, null, {flip:false, aligntopath:true, coverall:true, scaling:2, closepath:false, recenter:true, material:mat, subdivision:6, bothsides:true});
view.scene.addChild(pathextrude);
view.render();
Do you know what the problem is?
July 4th, 2008 at 5:31 pm
Please disregard my prior post; I’ve found that if you make two paths with negative reciprocal world axes, you can make a nice circle. Thank you very much for this awesome new Class, Mr. Closier!
July 4th, 2008 at 8:24 pm
I’m glad you found out! Would be very nice if you could send me a link to see what you are doing with it. Btw if you plan make torus like, just pass same profile to the Lathe class, it’s especially designed to build that kind of shapes.
And please call me Fabrice! Sounds like if I’m over 40 or something… dam, I am!
July 21st, 2008 at 8:36 am
cant it be add some tweener as animation ?
July 29th, 2008 at 1:54 pm
A PathFollower is in the make, but is not released yet.
this demo shows a very early build of it.
http://www.closier.nl/blog/?p=56
Vertex/path animation tools are also in development
July 9th, 2010 at 1:23 pm
Hi fabrice,
Love the work you are doing there, particularly on the extrude class. I would like to explore how this could be used to tranform a 2D sketch of a Floor Plan into a 3D Flash element simply by clicking a few pointers (walls extruding into 3D walls, doors into 3D doors, windows into 3D windows etc). Are you able to get involved in an experiment? Do you engage in private, paid work?
Many thanks
Nick
(pls email me on nick@fishdog.co.uk)