Tutorial: Away3D TypeScript: Primitives – Cube

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

We will be recreating the scene as seen above.

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

  • Declare, instantiate, and initialize a new Cube object.
  • Declare, instantiate, and initialize a new Mesh object.
  • Assign the Cube 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.

CubePrimitive.ts

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 PrimitiveCubePrefab 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.

Line 67 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.

Constructor

The constructor looks as follows:

The Constructor’s Parameters:

  • width:Number (default = 100) — The size of the cube along its X-axis.
  • height:Number (default = 100) — The size of the cube along its Y-axis.
  • depth:Number (default = 100) — The size of the cube along its Z-axis.
  • segmentsW:uint (default = 1) — The number of segments that make up the cube along the X-axis.
  • segmentsH:uint (default = 1) — The number of segments that make up the cube along the Y-axis.
  • segmentsD:uint (default = 1) — The number of segments that make up the cube along the Z-axis.
  • tile6:Boolean (default = true) — The type of uv mapping to use. When true, a texture will be subdivided in a 2×3 grid, each used for a single face. When false, the entire image is mapped on each face.

So in our initialization we stated:

Which created a Cube:

  • 250 units wide.
  • 250 units high.
  • 250 units deep.
  • Defaulted to 1 segment along the X axis.
  • Defaulted to 1 segment along the Y axis.
  • Defaulted to 1 segment along the Z axis.
  • Defaulted to true to subdivide the texture into a 2×3 grid.

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 *

*