Tutorial: Away3D TypeScript: Lights – DirectionalLight

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

We will be recreating the scene as seen above.

To use a DirectionalLight, we’ll need to:

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

DirectionalLight.ts

Line 5 renames the class to DirectionalLight.

Line 11 declares a variable named _light of type DirectionalLight.

Line 12 declares a variable named _lightPicker of type StaticLightPicker.

Line 29 calls the method setupLights().

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

Line 52 instantiates a new DirectionalLight() object referenced by the variable _light. It was initialized with -1, -.5, 1: which we’ll discuss more later.

Line 53 instantiates a new StaticLightPicker() object referenced by the variable _lightPicker. Then _light was passed as the target of the StatickLightPicker().

Line 54 adds the DirectionalLight object _light to the scene.

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

Line 94 changes the called class name to DirectionalLight.

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.

Constructor

The constructor looks as follows:

The Constructor’s Parameters:

  • xDir:Number (default = 0) — The x-component of the light’s directional vector.
  • yDir:Number (default = -1) — The y-component of the light’s directional vector.
  • zDir:Number (default = 1) — The z-component of the light’s directional vector.

So in our initialization we stated:

Which created a DirectionalLight:

  • Pointing -1 or -90 degrees along the x-axis.
  • Pointing -.5 or -45 degrees along the y-axis.
  • Pointing 1 or 90 degrees along the z-axis.

Basically we said, the light source will be coming from the right, slightly up, and closer to the camera.
Or, think of it as,
The light is pointing towards the bottom left corner of the scene and away from the camera.

More about the DirectionalLight

The DirectionalLight simulates light coming from one direction, not a source. Like a large flat surface emitting light. All perpendicular surfaces will be fully lit by the light. All parallel surfaces, and surfaces on the back side of objects will not receive any light at all.

Since there is no actual source for the light, the DirectionalLight only need a 3D vector point to aim the light at. This may be a little hard to mentally grasp, so I made the following images with their respective 3D vector points.

You’ll notice, when the 3D vector is (0, 0, 1) that the light source is coming straight on from the camera. Remember, any surface that is perpendicular to the light will be fully lit. Hence the backside of our arrow and the flat background plane are fully lit. Our cube on the other hand is lit, but only a fraction of the brightness, because its surfaces are somewhere between perpendicular and parallel to the light.

Even though there is no source, there is a hotspot (or brighter center) to the light. This is something to be conscious about.

Look through the documentation for more about changing the diffuse, specular, ambient, and color of the light.

In Closing

Adding a basic lighting is relatively easy. Just understanding the constructor and which way to point the 3D vector, 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 *

*