Using triangles for 3D effects

In ActionScript, you perform bitmap transformations using the Graphics.drawTriangles() method, because 3D models are represented by a collection of triangles in space. (However, Flash Player and AIR do not support a depth buffer, so display objects are still inherently flat, or 2D. This is described in Understanding the 3D features of Flash Player and the AIR runtime.) The Graphics.drawTriangles() method is like the Graphics.drawPath() method, as it takes a set of coordinates to draw a triangle path.

To familiarize yourself with using Graphics.drawPath() , see Drawing Paths.

The Graphics.drawTriangles() method uses a Vector.<Number> to specify the point locations for the triangle path:

drawTriangles(vertices:Vector.<Number>, indices:Vector.<int> = null, uvtData:Vector.<Number> = null, culling:String = "none"):void

The first parameter of drawTriangles() is the only required parameter: the vertices parameter. This parameter is a vector of numbers defining the coordinates through which your triangles are drawn. Every three sets of coordinates (six numbers) represents a triangle path. Without the indices parameter, the length of the vector should always be a factor of six, since each triangle requires three coordinate pairs (three sets of two x/y values). For example:

graphics.beginFill(0xFF8000); 
graphics.drawTriangles( 
    Vector.<Number>([ 
        10,10,  100,10,  10,100, 
        110,10, 110,100, 20,100]));

Neither of these triangles share any points, but if they did, the second drawTriangles() parameter, indices , could be used to reuse values in the vertices vector for more than one triangle.

When using the indices parameter, be aware that the indices values are point indices, not indices that relate directly to the vertices array elements. In other words, an index in the vertices vector as defined by indices is actually the real index divided by 2. For the third point of a vertices vector, for example, use an indices value of 2, even though the first numeric value of that point starts at the vector index of 4.

For example, merge two triangles to share the diagonal edge using the indices parameter:

graphics.beginFill(0xFF8000); 
graphics.drawTriangles( 
    Vector.<Number>([10,10, 100,10, 10,100, 100,100]), 
    Vector.<int>([0,1,2, 1,3,2]));

Notice that though a square has now been drawn using two triangles, only four points were specified in the vertices vector. Using indices , the two points shared by the two triangles are reused for each triangle. This reduces the overall vertices count from 6 (12 numbers) to 4 (8 numbers):

A square drawn with two triangles using the vertices parameter

This technique becomes useful with larger triangle meshes where most points are shared by multiple triangles.

All fills can be applied to triangles. The fills are applied to the resulting triangle mesh as they would to any other shape.