Workbook 6, Page 5: Lights, Camera, Action!

Workbook 6, Page 5: Lights, Camera, Action!

Box 1: The Camera

The "normal" camera we will use to make scenes is the PerspectiveCamera - see its documentation.

By default, the camera sights down the negative Z axis, and it's default position is at the origin. Therefore, we almost always need to position it (to place the eye point at someplace useful), and rotate it (to aim the camera at something interesting). Fortunately, the camera in THREE is like any other Object3D and has a full complement of positioning and orienting functions.

One particularly useful function is lookat - a method that sets the rotation of the camera so that the negative Z axis points at the specified position. This makes it such that the position given to lookat appears at the center of the camera's image. We'll learn more about how lookat works in class. But an important thing to remember: lookat is just like any of the other THREE functions for setting rotation. We could use any one we want on the camera (we just often want to use lookat because it is convenient).

The intuition to have for using the camera is just like placing a real camera in the world - we need to position it and orient it so that we can see what we want.

Make sure you understand the parameters of the PerspectiveCamera. The "field of view" tells us how "wide-angle" the lens is. The aspect ratio must be set to the aspect ratio of the window that we are drawing into - otherwise things will get squished. The camera also needs to know a near distance (any object that is too close will be ignored) and a far distance (any object that is too far away will be ignored). The near and far distances will be important when we get to visibility.

We'll learn about the math of Cameras soon. If you want to read ahead (optionally), check out Chapter 7 of Fundamentals of Computer Graphics FCG4_Ch07.pdf or Chapters 8 and 9 of Hart (Hart08-jan19.pdf and Hart09-jan19.pdf).

Box 2: Lights

Most graphics objects don't emit light: they must receive light in order to have their colors come out. In Three, most materials respond to light - and in fact they require light (otherwise, everything will just be black).

We will learn about the mathematics of light sources later, but for now, we can think of light sources as objects that we place in the scene. Except, that rather than seeing the light, the lights affect other objects.

Lights differ in their geometry - which rays they send out and what directions. The directions are important, as that effects appearance.

The kinds of lights we will use in Three (for now):

With all lights, we can set a color and an intensity. Different kinds of lights have different parameters (like falling off with distance).

Also, while Lights are in the Scene, we don't see them - even if we look at them. If you want the lights to be visible, you need to create a "helper" object that shows up as a shape to show where the light is.

Here's an example (in 5-Lights.js): try changing the lights, or removing a light (by commenting out the line that adds it to the scene) to see the effects of different lights. The objects are moving so you can see the effects of light as things change. This scene does have the orbit controls.

This scene has a spotlight from above, a yellow directional light from the side, and a point light that is above and to the side.

Note that we don't get shadows unless we explicitly turn them on (which requires several steps). For this assignment, we won't use shadows. Light passes through objects (as well as lighting them up).

Box 3: Aiming lights and Cameras

With both lights and cameras, we position them as we would any other object. We can either set the position or use translate transformations.

Aiming cameras and lights is different. For a camera, we treat it as an object in the world and rotate it.

For a light, we set a target position (which behaves like the point we use in lookat). If you read the documentation (e.g. DirectionalLight) it tells us that we need to add the target to the scene. This allows the transformation machinery to apply. However, we don't need to add the target to the scene: we can add the target anywhere in the scene graph hierarchy.

Look at the code to see how we aim the spotlights.

Be sure to look at the code (the function spot)! Note how we use a group for the green spotlight to move its position and target position together.

Unfortunately, the SpotLightHelper objects (which are useful for seeing where spotlights are and what they are doing) don't update correctly for dynamic spotlights (with THREE's scene graph, we don't get control over what gets updated first). So you'll have to figure this out yourself.

Box 4 Exercise: Lighting

Your turn. Here's a scene with some white cubes in it. Add some colored lights to the scene so that the different sides of the cubes are different colors. Use this as an opportunity to try out different kinds of lights. Edit the file 5-Lights-ex.js to do this. You just need to add enough lights that we can see the cubes, and that we see different colors - but you can get fancier if you want.

Summary: Lights and Cameras

Now we've made lights and cameras, we can talk about materials on the next page.