Tutorial: Away3D TypeScript: Primitives – Line Segment

This is a short overview tutorial of the LineSegment primitive in the Away3D TypeScript library.

We will be recreating the scene as seen above.

Unlike the other primitive shapes, instead of adding the geometry to a mesh, we add LineSegment(s) to a collection of line segments (even if it is just one line) in a SegementSet.

Each LineSegment(s) have a starting vector point and ending vector point. This determines the segment’s length. By defining the start and end colors; you may have a solid colored line, or a gradient shaded line. Finally you may set the thickness (width) of the line. Note, that LineSegement(s) do not have depth nor feelings. They are flat in one dimension.

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

  • Declare, instantiate, and initialize a new LineSegment object.
  • Declare, instantiate, and initialize a new SegmentSet object.
  • Assign the LineSegment object to the SegmentSet object.
  • Add the SegmentSet 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 5 renames the class to LineSegment.

Line 14 declares a variable named _lineSeg of type LineSegment().

Line 15 declares a variable named _lineSet of type SegmentSet().

Line 54 instantiates a new LineSegment() object referenced by the variable _lineSeg. It was initialized with new away.geom.Vector3D(-200, 0, 0), new away.geom.Vector3D(200, 0, 0), 0x553333, 0x9999BB, 5: which we’ll discuss more later. **As of this writing, if you try the default constructor without passing the starting and ending vectors the complier will throw a TS2081 error.

Line 55 instantiates a new SegmentSet() object referenced by the variable _lineSet.

Line 56 adds the LineSegment to the SegmentSet. Remember, a SegmentSet is a collection of lines to be added to the scene. You need to do this even if you have just one line.

Line 57 adds the SegmentSet object containing the defined LineSegment to the scene.

Lines 70-71 adds a spin to our SegmentSet object on every frame of animation.

Line 96 changes the called class name to LineSegment.

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:

  • v0:Vector3D — Start position of the line segment
  • v1:Vector3D — Ending position of the line segment
  • color0:uint (default = 0x333333) — Starting color of the line segment
  • color1:uint (default = 0x333333) — Ending colour of the line segment
  • thickness:Number (default = 1) — Thickness of the line

So in our initialization we stated:

Which created a LineSegment:

  • With a start Vector3D() of -200 units left along the X axis.
  • With an end Vector3D() of 200 units right along the X axis.
  • With a starting color of 0X553333. This gives the beginning of our line a slight dark red tint.
  • With a starting color of 0X9999BB. This gives the end of our line a slight light blue tint.
  • A thickness of 5 units.

Which basically is a 400 unit long line, 5 units wide, that fades from a dark grey red to a light blue.

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.

Here’s a fun LineSegment demo by Jérôme Birembaut. (You will need Adobe Flash Player installed to view the demo.)

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 *