You are Here:Home>>Old Posts>>Tutorial | Away3D PathExtrude: Cords & Ribbons

Tutorial | Away3D PathExtrude: Cords & Ribbons

Carlos Pinho
By | 2008-06-16T23:46:17+00:00 Jun 16, 2008|Old Posts|


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

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



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,


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!

About the Author

Fabrice Closier is a Flash Developer, and belongs to the Away3D team. He run’s also a blog where you can view more tips and tutorials about this awesome Flash 3D Engine.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.