Learning Three.js: Part 4: Light Sources

Requirements:

In Part 1, I covered some general terms and techniques used in Three.js, a three-dimensional rendering JavaScript library. Part 2 reviewed some of the geometry and material options in creating meshes. Part 3 demonstrated how to load and use textures (images) for those same meshes as a continuation of building from the first example code. In this fourth part, I show examples using the light source objects PointLight, SpotLight, and AmbientLight.

PointLight

PointLight is an omnidirectional light source with an intensity decay in a spherical shape out from its initial source position.

Returning to the example code from Part 3, a PointLight can be added through only a few lines of code. However, in adding in a PointLight source, the material type must change away from Basic in order to show the light source.

yvf4peqfw4

SpotLight

Unlike PointLightSpotLight emits only in one direction from a single distant position.

Returning to the Part 3 example code again, a SpotLight can be added through setting a light color only. While PointLight needed an intensity, distance, and position, SpotLight only needs a light color because it emits from a distance into a scene.

lajkaebsr1

AmbientLight

Similar to PointLightAmbientLight expands outward instead of from a single point. However, it also broadcasts completely through the scene to all objects that can receive it.

Using the same example code, the green part of the checkered pattern texture can be filtered out through using only ambient red light. The result “transforms” the green into red and the red side into black.

rafsdaa5q9