A vertex is a point in 3D space defined by its position along the X, Y, and Z axes. An individual vertex does not have any volume or shape, and is not visible in the scene, but they can be used in combination to represent the corners of 3D shapes.

Vertices are represented by the Vertex class from the away3d.core.base package.

A group of three vertices are used to define the corners of a triangle, otherwise known as a triangle face, or just a face.

The triangle face is one of the three elements used by Away3D that can be added directly to a mesh to create more complex shapes. A mesh can be thought of as a container used to hold a collection of these basic elements, allowing them to be displayed as a group to visualize more recognizable 3D objects. Meshes are represented by the Mesh class from the away3d.core.base package.

Simple meshes can be made up using a small number of triangle faces. This cube mesh is made up of 12 triangles: 2 triangles for each side.

More complex meshes, such as this car, can comprise several thousand triangle faces.

Triangle faces are represented by the Face class from the away3d.core.base package. Here is some example code that creates a mesh containing a single triangle face.

First, we need to create a new instance of the Mesh class. This will hold the triangle face element.

var mesh:Mesh = new Mesh();

Next, we create a new instance of the Face class. This represents the triangle face element that will be added to the mesh.

var face:Face = new Face(

The first three parameters passed to the Face constructor define the three vertices that make up the corners of the triangle.

  new Vertex(0, 10, 0),
  new Vertex(-10, -10, 0),
  new Vertex(10, -10, 0),

The fourth parameter can be used to define a material that is applied to this element. Chapter 5, Materials, looks at materials in more detail. We have passed in null here, which means the triangle face will use the default mesh material.

  null,

The last three parameters define the UV coordinates to be applied to the triangle face, which in turn define how a material will be applied. The following UV coordinates section discusses these coordinates in more detail.

  new UV(0, 0),
  new UV(0, 1),
  new UV(1, 0)
);

Finally, the triangle face is added as part of the mesh.

mesh.addFace(face);

The resulting Mesh object can then be added to the scene.

The order in which the vertices are defined in a triangle face determine which side of the triangle is considered the front, and which side is the back. The distinction is important because the back of a triangle face is not visible, by default.

The side whose vertices are arranged in counterclockwise order is the front of the triangle face. The following image shows how the order of the Vertex objects passed in as the first three parameters to the Face constructor, and the counterclockwise direction that they make, define the front and back sides of the triangle face.

This process of creating a triangle face and adding it to a mesh is essentially how most of the primitive shapes included in Away3D are constructed, although some of the primitive classes, such as the Cube class, extend the AbstractPrimitive class from the away3d.primitives package to utilize the number of utility functions that the AbstractPrimitive class provides to aid in the creation of primitive shapes.

Meshes can also contain Sprite3D objects, which are 2D rectangular shapes that are always oriented so they face the camera. While a Sprite3D object has no depth, because it is never viewed from the side, this lack of depth is never perceived by the camera.

The Sprite3D class exists in the away3d.sprites package. Here is an example that creates a Mesh object containing a single Sprite3D object that sits at the meshes origin.

var mesh:Mesh = new Mesh();

The first parameter of the Sprite3D constructor is the material that it will display. It is an optional parameter that defaults to null. Without a material a Sprite3D object simply displays a rectangle. To make this example more interesting we supply a new instance of the BitmapMaterial class, which is set to display an embedded image file called MyEmbeddedTexture. Materials, the Cast class, and embedding resources are covered in more detail in Chapter 5, Materials.

var sprite:Sprite3D = new Sprite3D(
  new BitmapMaterial(Cast.bitmap(MyEmbeddedTexture))
);

The Sprite3D object is then added to its parent mesh using the addSprite() function.

mesh.addSprite(sprite);

Sprite3D objects can be utilized to display details that appear the same from any direction, like snowflakes or ball decorations on a Christmas tree. Sprite3D objects are very simple elements, and therefore fast to render. Using Sprite3D objects in place of a group of triangle faces can lead to significant gains in performance.

Take the mesh representing the Earth in the following figure. This might be a part of an astronomical application designed to show off the solar system, and would be typically created from a sphere primitive. The wireframe image on the left shows the triangle faces that make up the sphere, and the image on the right shows the sphere with a texture of the Earth applied to it.

This sphere is built up from a relatively small number of triangle faces, which means that the sphere appears to have a number of sharp, angular edges. Because of the low triangle count, you could expect an Away3D application displaying this one sphere to perform well. But what if you are displaying all the planets? Maybe you also want to display all the moons around all the planets as well. Rendering the triangle faces for all those additional spheres does add up.

Now take a look at a mesh that contains a single Sprite3D object.

The Sprite3D object is displaying a material that shows the Earth from a single angle. The texture used by this material has been pre-rendered from a sphere made up of many thousands of triangles, which eliminates the sharp edges seen in the previous triangle mesh. Away3D can render this Sprite3D object, displaying the pre-rendered texture, much faster than it can display the lower-quality sphere from the first two images. An application displaying all the planets and moons in the solar system will run at a much higher level or performance if they were displayed as meshes made up of a single Sprite3D object, as opposed to being displayed as meshes made up of a number of triangle faces.

The downside to Sprite3D objects is that, unlike regular 3D objects, they appear the same when viewed from different angles. Even if we were to view the mesh built using a Sprite3D object representing the Earth from the other side, it would still show the Indian Ocean. You can see this effect in action with the CompareSprite3DTriMesh application from the Packt website.

Segments are used to display 2D lines. Strictly speaking, a 2D line has no volume, and should therefore be invisible. However, there are many situations where being able to view a line within the scene is useful.

Segments are represented by the Segment class from the away3d.core.base package. The geometry of a segment is defined between two vertices. Here is an example that creates a Mesh object containing a single Segment object stretching 50 units either side along the X-axis of the meshes origin:

var mesh:Mesh = new Mesh();
var segment:Segment = new Segment(
    new Vertex(-50, 0, 0),
    new Vertex(50, 0, 0)
);

Segments are added to their parent mesh using the addSegment() function.

mesh.addSegment(segment);