Tutorial: Away3D TypeScript: Primitives – Sphere

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

We will be recreating the scene as seen above.

To use a Sphereprimitive, we’ll need to:

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

  • radius:Number (default = 50) — The radius of the sphere.
  • segmentsW:uint (default = 16) — Defines the number of horizontal segments that make up the sphere.
  • segmentsH:uint (default = 12) — Defines the number of vertical segments that make up the sphere.
  • yUp:Boolean (default = true) — Defines whether the sphere poles should lay on the Y-axis (true) or on the Z-axis (false).

So in our initialization we stated:

Which created a Sphere:

  • With a radius of 200 units. (Half of the circular width).
  • 16 segments in the circular width.
  • 16 segments along the height.
  • We said true to that the sphere’s poles should run from top down along the Y axis.

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 *