Tutorial: Away3D TypeScript: Materials – Color

This is a very quick overview tutorial of the ColorMaterial in the Away3D TypeScript library.

ColorMaterial is a single-pass material that uses a flat color as the surface’s diffuse reflection value

We will be recreating the scene as seen above.

To use a ColorMaterial on our Template code, we’ll need to:

  • Declare, instantiate, and initialize a new ColorMaterial object.
  • Assign the ColorMaterial object to the Mesh object’s material.

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 ColorMaterial.

Line 11 declares a variable named _objectMatrial of type ColorMaterial().

Line 48 instantiates a new ColorMaterial() object referenced by the variable _objectMaterial. It was initialized with 0xFF0000, 0.5: which we’ll discuss more later.

Line 55 instantiates a new Mesh() object referenced by the variable _objectMesh. Then _objectMesh‘s geometry was initialized with _objectGeometry. Finally the _objectMesh‘s material was initialized with our ColorMaterial object _objectMaterial.

Line 94 changes the called class name to ColorMaterial.

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:

  • color:uint (default = 0xcccccc) — The material’s diffuse surface color. Color is written in Hex code format.
  • alpha:Number (default = 1) — The material’s surface alpha. *Note the lower the alpha the more transparent the object will be. The higher the alpha, the more opaque, or solid the color. The range is from 0.0 to 1.0

So in our initialization we stated:

Which created a ColorMaterial:

  • That is 0xFF0000 or red in color.
  • And has .5 alpha. In other words it is 50% transparent.

In Closing

Adding a ColorMaterial 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 *