Tutorial: Away3D TypeScript: Primitives – Plane

This is a quick overview tutorial of the Plane primitive in the Away3D TypeScript library.

We will be recreating the scene as seen above.

To use a Plane primitive, we’ll need to:

  • Declare, instantiate, and initialize a new Plane object.
  • Declare, instantiate, and initialize a new Mesh object.
  • Assign the Plane object to the Mesh object.
  • Add the Mesh object to the scene.

This tutorial builds off of the Away3D TypeScript: Template. All the new or changed code will be highlighted in the full code block below.


Line 15 declares a variable named _objectMesh of type Mesh().

Line 53 instantiates a new Mesh() object referenced by the variable _objectMesh. Then _objectMesh was initialized by calling the getNewObject method on a new PrimitivePlanePrefab object that was cast-typed to type Mesh. We’ll discuss the values passed to the prefab later.

Line 54 adds the Mesh object containing the defined prefab geometry to the scene.

Lines 67-68 adds a spin to our Mesh object on every frame of animation.
That’s it, our object is in the scene.

However, we glazed over the initialization process, let’s take a closer look at the object’s constructor.


The constructor looks as follows:

The Constructor’s Parameters:

  • width:Number (default = 100) — The width of the plane.
  • height:Number (default = 100) — The height of the plane.
  • segmentsW:uint (default = 1) — The number of segments that make up the plane along the X-axis.
  • segmentsH:uint (default = 1) — The number of segments that make up the plane along the Y or Z-axis.
  • yUp:Boolean (default = true) — Defines whether the normal vector of the plane should point along the Y-axis (true) or Z-axis (false).
  • doubleSided:Boolean (default = false) — Defines whether the plane will be visible from both sides, with correct vertex normals.

So in our initialization we stated:

Which created a Plane:

  • With a width of 250 units.
  • With a height of 250 units.
  • 1 segment along the width.
  • 1 segment along the height.
  • We said true to that the plane’s normal vector should point along the Y axis.
  • We said true that the plane should be double sided. (Visible from both sides).

In Closing

Adding a basic primitive is relatively easy. Just understanding the constructor and what the parameters are, is the hardest part. You can look at the official documentation here.

If this tutorial helped you, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *