When making a three.js project, and working with materials that respond to light such as the standard material it might be desirable to add some ambient light to a scene. Ambient Light differs from other light sources in that it will evenly illuminate materials evenly from all directions, actually direction is not really even taken into account with this kind of light source. By adding an ambient light it will just simply light up all surfaces of all mesh objects that are skinned with a material that will respond to light when it is added to the scene object.
This kind of light source is very different from spot lights or point lights that radiant out light from a certain point in space and only illuminate surfaces that strike the surfaces that they come in contact with. However it is often a good idea to combine ambient light with one of these kinds of lights in order to see a kind of depth. I also like to tone down the intensity of an ambient light so that it does not end up making all the surfaces fully intense canceling out the effects of any additional direction light sources I might have added.
So then in this post I will just be going over a few quick examples of using ambient light in a three.js project. In the process of doing so I will also be covering a few other loosely related topics when it comes to light in general, such as the kinds of materials that can be used that will be effected by light.
One thing to keep in might with light in threejs is that not all materials will work with light sources. The basic material for example will not work with light, and the same can be said of the Normal material and the depth material. However materials like the standard material, Lamber material, and Phong material will work with light sources. There are subtle differences between these materials, and other note worth considerations when it comes to performance. However I generally like to go with the standard material when it comes to getting into using light with a project.
Ambient light is just on way of adding some light to a scene in general. It will result in light evenly hitting all surfaces of all objects in the scene, this differs from other options when it comes to lighting such as spotlights which is a kind of directional light at a target. However I would not confuse spot lights with directional lights as that is yet another option when it comes to choosing a light option. I do jot often use spotlights though, the light directional light source that I often go with is a point light that will throw light in all directions from the position at which the point light is placed.
The source code examples that I am writing about here can also be found in my test threejs reposatory up on Github. This is also where I part the source code for my many other posts on threejs as well.
When I first wrote this post I was using r98 of three.js, and the last time I cam a round to do a little updating of the code examples I was using three.js r146 of threejs. I do not think that much has changed with ambient light in sense then, but a whole lot has changed with threejs outside of ambient light for sure.
There is still a lot changing with threejs real fast, so it is possible that some of these code examples here might break at some point in the future for this reason. So always be mindful of what revision number of the librray you are using.
For this first opening section I will just be writing about some quick basics of ambient light in threejs.
Setting up some ambient light for a project is not to hard at all. I just need to call the THREE.AmbientLight constructor, and pass it a color value that will be used for the color of the AmbientLight. I will then want some kind of mesh to look at that makes use of a material that will respond to light. One example of this kind of material would be the standard material, but there are additional alternatives such as the Lambert material. In any case for this example at least I just went with a simple cube geometry and the standard material as a way to skin it.
So the result of this is that I have a red cube in front of me in the canvas element. If I did not have any light at all I would not be able to see the cube. When it comes to materials like the basic material for example that is a material that does not work with light at all. So when using the basic material I can just see whatever the color of a cube is without having to bother with light.
Ambient light is not and end all solution for light though, I often do add at least one additional direction light source such as a point light and position that light in such a way as to be able to see some kind of depth with the cube.
There is often at least one additional little thing that I like to do when adding ambient light to a project and that is to tone down the intensity at least a little. On top of that I will often add yet another light source to the project that is a direction light rather than an ambient light that will effect all materials evenly.
Ambient light is a great basic option for adding light to a scene, but I would never use ambient light on its own. Typically this ambient light option will be used in conjunction with at least one other light option that will be the light source that will help to show some depth. Now there are a lot of options to go about showing depth mid you that do not have to involve the use of light sources. However this is very much a post on ambient light, so I should have a section here on at least a few more light sources options that are typically used in conjunction with ambient light.
The typical additional option for working with light that I add on top of ambient light would be directional light. This is a kind of light that will shine light in a uniform parallel direction. The position property of the light object is what I can use to change this direction and it is just the direction part of the vector that matters for this.
Another option for adding additional light to a scene that will help wot show some depth would be to add a point light. This kind of light source will send light out in all directional from a given point that can be set, and updated over time by changing the state of the vector3 object of the position property of the light object.
So this might prove to be a better situation when it comes to adding a basic lighting setup for a threejs example. However there is maybe even A bit more to cover whe it comes to ambient light. Also it should go without saying that there is a great deal to cover when it comes to additional light sources as well as materials that respond to light. There is also the emissive maps of materials also, that is making a mesh that will have its own light as it where.
Ambient light is then one of many options when it comes to adding light sources to a scene. When it comes to ambient light it does not matter what the position of the light source is which is not the case for many other light source objects. The effect of that ambient light is to set a kind of base amount of light for all surfaces of all objects in a scene. There are material options thought for getting a similar effect such is the case when it comes to the emissive color, and also creating emissive maps for materials as well.