Tutorial: Away3D TypeScript: Primitives – Wireframe Cylinder

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

We will be recreating the scene as seen above.

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

  • Declare, instantiate, and initialize a new WireframeCylinder object.
  • Add the WireframeCylinder object to the scene.

Notice, we do not place the wireframe in a Mesh object. This is because a Mesh would be overkill, trying to apply materials, shaders, and what have you. So just add the wireframe object as a child of the scene itself.

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


Line 5 renames the class to CylinderGeometry.

Line 17 declares a variable named _objectWireframe of type WireframeCylinder().

Line 60 instantiates a new WireframeCylinder() object referenced by the variable _objectWireframe. It was initialized with 150, 150, 300, 16, 1, 0xFFFFFF, 1: which we’ll discuss more later.

Line 61 adds the WireframeCylinder object to the scene.

Lines 76-77 adds a spin to our WireframeCylinder object on every frame of animation.

Line 102 changes the called class name to WireframeCylinder.

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:

  • 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.
  • color:uint (default = 0xFFFFFF) — The color of the wireframe lines
  • thickness:Number (default = 1) — The thickness of the wireframe lines

** 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 WireframeCylinder:

  • A top radius of 150 units. (Half of the circular width).
  • A bottom radius of 150 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.
  • colored white (0xFFFFFF).
  • With a line thickness of 1 units.

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 *