This tutorial requires the Away3D 2.1 library or higher.

Note: This class is still under development and in its 2.2 version and higher, you are able to pass a rotation array to generate a twisted shape like the rails in the RailAway demo. The way rotations are defined is similar to the way the scale influence is described in this article.

2.1 constructor

function PathExtrude(path:Path=null, points:Array=null,
scales:Array=null, init:Object = null){

2.2 constructor

function PathExtrude(path:Path=null, points:Array=null,
scales:Array=null, rotations:Array=null, init:Object = null){

The way it works
The PathExtrude class projects any profile defined by a series of Number3D objects along a given path, and generates a mesh by connecting neighbouring profiles to each other. Bottles, worms, phone cords, cables, ribbons, roads and even race tracks are within the range of possibilities, and the sparing use of triangles in a mesh and resulting low filesize makes it ideal for game development. The class allows you to scale per segment along the local xyz axes of the path. The orientation is automatically generated when the aligntopath property is set to true. Where this is set to false, the profiles will be generated without orientation. Another rotation influence can be added in order to get a twisted shape (2.2 and higher).

How to implement
First we need to import the two required classes.

import away3d.animators.PathExtrude;
import away3d.animators.data.Path;
[...code...]

Path
In order to project a profile on a path, we first need to define a path using the Path class. A Path instance holds path information as a series of CurveSegment objects. Each CurveSegment is a piece of curve information stored as 3 Number3D objects. It is exactly the same data used by the CurveTo method in the flash drawing API: start point, control point and end point of the curve.

var aPath:Path =
new Path([
new Number3D(-400, 0, -150),new Number3D(-200, 300, 0), new Number3D(0,0,0),
new Number3D(0,0,0), new Number3D(200, -300, 0), new Number3D(400, 0, 0),
new Number3D(400, 0, 0), new Number3D(600, 300, 0), new Number3D(800, 0, 0),
]);

Defining a path by code can be tedious, therefore the Path class hold more properties and handlers, like smoothPath, which are helpful when it comes to generating smooth curves. Please refer to the Away3d documentation for extra information.

Profile
The profile is a series of Number3D objects. It defines the cross-section of the shape you want to project along the path. For an object such as a hose, the profile would be a circle. Note that depending on the plane on which the profile is defined, you can also define a world axis vector (default is 0,1,0). This directional vector can be used to properly align your profile to the path curve. To set, apply directly to the Path instance:

aPath.worldAxis = new Number3D(0,0,1);

For this tutorial we define a profile on the x/y plane so we do not need to define a custom worldAxis property.

var aPoints:Array = [];
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));

At this point, the only other thing we need to do is declare a PatheExtrude instance, feed it with both path and profile instances and add to the scene like any other primitive.

var mat:IMaterial = new BitmapMaterial(somebitmapdata);
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});

We are done, the shape exists into memory, we just have to add it to the scene and render it.

this.view.scene.addChild(pathextrude);
this.view.render();

Note that this example shows the use of the init object common to most classes in Away3D. But you can set the variables one by one on the pathExtrude instance and then call the build() method if you prefer.

We are able to influence the profile scale per segment by passing a series of Number3Ds. By default the profile is being smoothed from startscale to endscale per segment. If we set the property smoothscale to false, each segment will be scaled uniformly. This is especially handy when it comes to building complex shapes like a bike frame, a teacup handle or 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 following the same index values as the CurveSegment objects declared earlier in our path definition. We can pass any number of scale modifiers up to the path array length. For instance if you only want to alter the mesh scale at the start of the path, you can pass an array less than the path array length and the last value is then reused for the rest of the scale generation.

With a scale array defined the constructor looks like this:

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

Here is the same code with some scale changes, this time we set the smoothscale property to false.
As you can see, the scale changes at the segment boundaries rather than smoothly across the segment mesh.

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 the profile with no 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 effect. The bothsides property on the mesh is set to false so you can see how smooth 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 we pass a star-like profile. This is something we would not be able to do with the Lathe class. We could roughly achieve the same look with the Skin class but if we wanted to bend the shape, PathExtrude is the only option.

The path generated for the second object has an extrude profile similar to the ribbon example, with aligntopath set to false.

Here is the same path as the first demo, except this time a circle like profile is passed to the constructor. The result is a cord!

Popularity: 2% [?]