In this lab we will see how to create different types of lights in WebGL. Homework 7 will build on the concepts from Labs 8 and 9.
Modify the sphere
Fork a copy of the starter code and examine it. When you run the file, you should see something like this:
It does not look too much like a sphere right now, but in the code it is. Notice that there is one light right now, an "ambient" light. Ambient lights only have a color, and cast that color of light over all the objects in the scene. To start, find the line that creates the sphere geometry and increase the number of segments and rings of the sphere to make it look more spherical.
Point Light
The next step is to comment out the ambient light and add a point light instead. Point lights are located at a specific point, and shine outwards in all directions. The arguments to the PointLight constructor are the color, intensity, and distance at which the light no longer has an affect. Its strength will gradually diminish until it is 0 at "distance" away from the light. (You can also set this distance to 0 for a light that won't diminish with distance.)
// point light
pointLight = new THREE.PointLight("green", 3, 150); // color, intensity, and distance
pointLight.position.set( ?, ?, ? );
scene.add(pointLight);
scene.add(new THREE.PointLightHelper(pointLight, 3)); // see where the light is
Using the code above to start, add this light and set a position for it (note the size of the sphere and make sure you place the light far enough away to get it out of the sphere). The PointLightHelper is useful since it creates a shape at the point light so you can see where it is (and can easily be removed later on). Test out a few different positions and make sure the results make sense.
Directional light
Now comment out the point light and add a directional light. Directional lights are meant to mimic a light source that is so far away, the angle of the rays are parallel (kind of like a sun infinitely far away). So the position of the light is only used to change the direction, not the position in a traditional sense. Decide on position arguments that will make the light shine on the sphere.
// directional light
dirLight = new THREE.DirectionalLight("white", 1);
dirLight.position.set( ?, ?, ? );
scene.add(dirLight);
Moving the Light
Finally we will update the position of this light to make it move in a circle about the origin, so that the sphere looks like a moon waxing and waning. Use Math.cos(...) and Math.sin(...) to reset the position of the directional light (inside the rendering loop). Each time the loop is called, update the global angle variable, then use this variable to reset the position. Here is one view of this animation in progress:
Finish Up
You do not have to turn this lab in, but make sure that everyone has a copy by the end of the lab. Homework 7 will continue the concepts in this lab.