Tutorial: Away3D TypeScript: Primitives – Cylinder

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

We will be recreating the scene as seen above.

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

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

CylinderPrimitive.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 PrimitiveCylinderPrefab 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.

Constructor

The constructor looks as follows:

The Constructor’s Parameters:

  • topRadius:Number (default = 50) — The radius of the top end of the cylinder.
  • bottomRadius:Number (default = 50) — The radius of the bottom end of the cylinder.
  • height:Number (default = 100) — The radius of the bottom end of the cylinder.
  • segmentsW:uint (default = 16) — Defines the number of horizontal segments that make up the cylinder. Defaults to 16.
  • segmentsH:uint (default = 1) — Defines the number of vertical segments that make up the cylinder. Defaults to 1.
  • topClosed:Boolean (default = true) — Defines whether the top end of the cylinder is closed (true) or open (false).
  • bottomClosed:Boolean (default = true) — Defines whether the bottom end of the cylinder is closed (true) or open (false).
  • surfaceClosed:Boolean (default = true) — Defines whether the middle surface of the cylinder is closed (true) or open (flase).
  • yUp:Boolean (default = true). — Defines whether the cone poles should lay on the Y-axis (true) or on the Z-axis (false).

** Note, if the topRadius and bottomRadius are different sizes, you will end up with something like a cone, but with flat ends. Would be good if you are making a megaphone.

So in our initialization we stated:

Which created a Cylinder:

  • A top radius of 100 units. (Half of the circular width).
  • A bottom radius of 100 units. (Half of the circular width).
  • 300 units high (or long depending how you look at it).
  • 16 segments in the circular width.
  • 1 segment along the length.
  • We said true, close the top of the cylinder.
  • We said true, close the bottom of the cylinder.
  • We said true, close the middle surface of the cylinder. (Otherwise we’d have two floating circles.)
  • We said true to that the cylinder’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 4.Gold, Away3D TypeScript, HTML Tagged with: , , , , , , , , ,

Leave a Reply

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

*