Page 5: Lights, Camera, Action!

On this page and the next, we’ll describe cameras and object appearance very briefly. The idea is to give you a sense of what you can do to make pictures. We’ll come back and learn the details later.

The Camera

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

By default, the camera looks down the negative Z axis, and its 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 soon. 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 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.

The readings (especially Fundamentals of CG - Chapter 7) discuss viewing, and provide the mathematical details. We’ll also discuss this in class. As you do the readings, it should connect to what you program in THREE (even though the matrices are hidden inside of THREE).

Adding 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 they effect appearance.

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

• AmbientLight - is a weird magic light that basically makes objects glow. It adds a uniform brightness to all objects - no matter what direction they are facing. Warning: ambient lighting does not affect the fancier (more realistic) materials.
• PointLight - sends rays of light out in all directions from a particular point. It’s like a light bulb. It needs to be positioned in the world.
• SpotLight - A spotlight is like a point light, but it only sends light in certain directions. It both needs to be positioned, but also oriented like a camera.
• DirectionalLight - creates rays of light coming from the same direction. This is useful to simulate sunlight (light coming from above), or other cases where we have big light sources that are far away.

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 06-05-01.js ( 06-05-01.html): 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 2: 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 object directly: we can add the target anywhere in the scene graph hierarchy.

Look at 06-05-02.js ( 06-05-02.html) to see how we aim the spotlights.

Be sure to look at the code! 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 3: 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 06-05-03.js ( 06-05-03.html) 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 Page  6  (Materials).

Next: Materials