Tutorial: Away3D TypeScript – Trident

In this simple tutorial we will be demonstrating how to construct an XYZ Trident. There is a built in Trident utility class in ActionScript. Unfortunately in the Away3D TypeScript library there has yet to be one developed. So instead of waiting, make your own!

In our demo above, the user can interact with the 3D scene using the left button on a computer mouse (clicking and dragging the scene). In this small demo we will create XYZ-axis directional arrows and lines. To do this we will need:

  • Declare two variables that will hold the line length and radius.
  • Create the line segments.
  • Create the arrows.
  • Position and rotate the lines and arrows.
  • Color the lines and arrows.

Click and hold the left mouse button down as you drag the cursor across the scene. This is accomplished by following the HoverController Tutorial

To open demo in a new window, click here.

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

Step 1: Declare Dimensions

First thing first, is to declare two variables that will hold the radius of the lines, and another for the length of the lines. Before the constructor, include the following to lines of code:

Step 2: Declare Object Meshes

For our trident, we will need three rods (long skinny cylinders) as well as three arrow heads (long narrow cones). Let’s declare them under our length and radius variables:

Step 3: Line Segments

Next we’ll create all three line segments using the following code inside our setupObjects() method:

As you can see we used our _rodRadius variable for both of the cylinder’s the top and bottom radius, as well as the _rodLength to set the total length of the rods (cylinders). Following each cylinder’s instantiation and initializing we added them to the scene.

Step 4: Line Placement and Rotation.

If you ran the code now, you’d have three rods directly on top of each other. For our trident, we want the X-rod laying along the X-axis, the Y-rod laying along the Y-axis, and naturally the Z-rod laying along the Z-axis. Furthermore, we want all three rods to start from the (0, 0, 0) origin of our 3D universe. To do this we must move them along their respective axis’ half of their length. The new code looks as follows:

Great, our rods are in the correct place. Time to make the arrow heads.

Step 5: Cones for Arrow Heads

Next we’ll create all three cones to use as arrow heads using the following code inside our setupObjects() method:

You’ll notice we did something a little different here. For the cone base we used the rods’ radiuses multiplied by 4, but instead of using the rods’ lengths, we used the rods’ radiuses multiplied by 16 for the length of the cones.

Step 6: Position and Rotate Arrow Heads

Things are starting to look pretty good. Except we have no way to differentiate the three axis. Let’s add some color to them.

Step 6: Color the Rods and Cones

First we will need to declare three color material objects. Before the constructor method, include the following code:

We want the X-axis to be read, the Y-axis to be green, the Z-axis to be blue.
In the setupMaterials() method, include the following code:

Finally, apply our new material shaders to each of the respective rods and cones. The entire setupObjects() method should look like:

In Closing

There you have it! A nice three axis trident to illustrate each vector direction.

Add a rotating cube and a HoverController camera and you’ll have the same layup as our demo above. Keep this short code on hand to throw into any project you need a sense of direction with.

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 *

*