Learning Three.js: Part 4: Light Sources


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 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.



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.



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.