Working with Light Sources in Three.js

In Chapter 1, Creating Your First 3D Scene with Three.js, you learned about the basics of Three.js, and in Chapter 2, The Basic Components that Make Up a Three.js Application, we looked a bit deeper at the most important parts of the scene: the geometries, meshes, and cameras. You might have noticed that we skipped exploring the details of lights in that chapter even though they make up an important part of every Three.js scene. Without lights, we won't see anything rendered (unless you use basic or wireframe materials). Since Three.js contains a large number of lights, each of which has a specific use, we'll use this chapter to explain the various details of the lights and prepare you for the upcoming chapters on material usage.

WebGL itself doesn't have inherent support for lighting. Without Three.js, you would have...

The different kinds of lighting provided by Three.js

There are a number of different lights available in Three.js that all have specific behavior and usages. In this chapter, we'll discuss the following set of lights:

Name	Description
THREE.AmbientLight	This is a basic light, the color of which is added to the current color of the objects in the scene.
THREE.PointLight	This is a single point in space from which light spreads in all directions. This light can't be used to create shadows.
THREE.SpotLight	This light source has a cone-like effect like that of a desk lamp, a spot in the ceiling, or a torch. This light can cast shadows.
THREE.DirectionalLight	This is also called infinite light. The light rays from this light can be seen as parallel, like, for instance, the light from the sun. This light can also be used to...

Basic lights

We'll start with the most basic of the lights: THREE.AmbientLight.

THREE.AmbientLight

When you create THREE.AmbientLight, the color is applied globally. There isn't a specific direction this light comes from, and THREE.AmbientLight doesn't contribute to any shadows. You would normally not use THREE.AmbientLight as the single source of light in a scene since it colors all the objects in the same color, regardless of shape. You use it together with other lighting sources, such as THREE.SpotLight or THREE.DirectionalLight, to soften the shadows or add some additional color to the scene. The easiest way to understand this is by looking at the 01-ambient-light.html example in the chapter-03 folder. With...

Special lights

In this section on special lights, we'll discuss two additional lights provided by Three.js. First, we'll discuss THREE.HemisphereLight, which helps in creating more natural lighting for outdoor scenes; then we'll look at THREE.AreaLight, which emits lights from a large area instead of a single point; and finally, we'll show you how you can add a lens flare effect to your scene.

THREE.HemisphereLight

The first special light we're going to look at is THREE.HemisphereLight. With THREE.HemisphereLight, we can create more natural-looking outdoor lighting. Without this light, we could simulate the outdoors by creating THREE.DirectionalLight, which emulates the sun, and maybe add an additional...

Summary

In this chapter, we covered a lot of information about the different kinds of lights that are available in Three.js. In this chapter, you learned that configuring lights, colors, and shadows is not an exact science. To get the correct result, you should experiment with the different settings and use a dat.GUI control to fine-tune your configuration. The different lights behave in different ways and, as we'll see in Chapter 4, Working with Three.js Materials, materials respond differently to lights as well. A THREE.AmbientLight color is added to each and every color in the scene and is often used to smooth hard colors and shadows. THREE.PointLight emits light in all directions and can cast shadows. THREE.SpotLight is a light that resembles a flashlight. It has a conical shape, can be configured to fade over distance, and is able to cast shadows. We also looked...