Tutorial: Away3D TypeScript: Lights – PointLight

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

We will be recreating the scene as seen above.

To use a PointLight, we’ll need to:

  • Declare, instantiate, and initialize a new PointLight object.
  • Declare, instantiate, and initialize a new StaticLightPicker object.
  • Assign the PointLight object to the StaticLightPicker object.
  • Assign the StaticLightPicker object to the lightPicker node of any materials we want the light to influence.
  • Add the PointLight 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 PointLight.

Line 11 declares a variable named _pointLight of type PointLight.

Line 12 declares a variable named _lightPicker of type StaticLightPicker.

Line 29 calls the method setupLights().

Lines 51-60 creates the private method setupLights(). This is were we set up the lights of course.

Line 53 instantiates a new PointLight() object referenced by the variable _pointLight. It was initialized with nothing: which we’ll discuss more later.

Lines 54-56 re-positions the PointLight object slightly closer to the camera than our cube object, slightly to the right side of our cube object, and slightly higher than our cube object.

Line 57 adds the PointLight object _pointLight to the scene.

Line 59 instantiates a new StaticLightPicker() object referenced by the variable _lightPicker. Then _pointLight was passed as the target of the StatickLightPicker(). *Note, as of this writing the StaticLightPicker required an array of arguments be passed. Even if it is just one item in the array. Hence why the included [] brackts around [this._lightPicker]. As you may have guessed, you can pass multiple lights to influence a material.

Line 73 assigns our _lightPicker to the lightPicker node of our cube’s material.

Line 112 changes the called class name to PointLight.

That’s it, our light is lighting 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:

  • There are no parameters to pass in the construction of a PointLight object.

So in our initialization we stated:

Which created a PointLight:

Simple and turning on a switch, no? Yes.

The important part is to remember to assign the PointLight object to a StaticLightPicker object, which in turn gets assigned to the lightPicker node of material object.

More about the PointLight

The PointLight simulates light coming from a source. Like a light bulb for instance. Like a light bulb, a PointLight can be moved around in space, and can influence the lighting on several objects from several different angles. Unlike the DirectionalLight, the PointLight‘s intensity fades/weakens as objects are farther away from the light source.

In Closing

Adding basic lighting is relatively easy. Just remembering to assign the light to a lightPicker and the lightPicker to a material’s lightPicker node, 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 *