In threejs there is a number of options when it comes to light sources for materials that respond to light. One of my favorite options for the most part would be the point light. This point lighting option can be sued to shine light in all directions from a single given point in space so it is a light source where direction matters, but it is not restricted to a cone like area as with a spot light. Also unlike with the directional light the unit length of the vector that is set for the point light also matters. However I would not say that it is a replacement for directional light, or spot lights by any means.
I often like to combine a point light with ambient light as a way to have a base line amount of light for all materials, while still having a sense of depth that can be obtained by still having some kind of directional light source such as with a point light. Speaking of directional light that is yet another kind of lighting option that one might consider.
In this post I will be going over a quick examples of the point light in threejs as well as touching base on some other related topics as well when it comes to setting up mesh objects that will respond to light. So then this might prove to be a quick fun example of threejs and light as well as some other things that come up when making a three.js project in general
There is not just adding a light source to a scene, but also knowing a thing or two about what your options are with materials. Not all materials will respond to light sources, so make sure that you are making use of a material that will do so. Often these days I light to go with the Phong material as this will allow for features like that of specular highlights which is often a nice feature that can also be adjusted with a number of options.
It should go without saying that there are many other options when it comes to light sources as such you might want to check out my post on light in general. However the main light sources that I find myself using the most often would be directional light and ambient light. Other light sources that I might used once in a while end up being spot lights, and yes the point lights that I will be writing about mainly in this post.
I have the source code examples that I am writing about in this post up on Github also. This test threejs repo is also where I park the source code examples for my many other blog posts on threejs as well.
When I first wrote this post I was using r104 of threejs, and the last time I came around to do a little editing in terms of both text and code I was using r146 of threejs. I can not say that much has changed with the point light alone between those two version numbers, but of course a great deal has changes with many other things in three.js. In any case always be mindful of what version of three.js you are using when playing around with threejs code examples on the open web not everything odes a good job of keeping their content up to date with this.
Here I am starting out with the usual scene object followed by a camera, and a renderer as with any threejs example I will need these objects. After I have my typical set of objects to work with I can now create a point light and add it to my scene objects. To do this I call the THREE.PointLight constructor function with the new keyword. When doing so I can pass a color as the first argument, and an intensity as a second argument when calling the constructor. The return product of calling the constructor will then be a new instance of the point light and I can then do things like setting the position of the light, and when I am ready I can go ahead and make it a child of the scene object.
Just about every Light option there is to work with has a helper class that can help give a visual idea of what the status is with the light option and the point light is no exception. To make use of this all I need to do is call THREE.PointLightHelper and pass the point light that I want a helper for. The returned result is then a point light helper object, which is yet another object3d class based object so I can then add it as a child of the scene or any other objet3d class based object as needed.
The end result of this is then a bunch of lines that will help me to just know where the location of the point light is. There are a number of other ways of how to go about doing this sort of thing though. Often I might want to use some kind of mesh object as a replacement for this sort of thing. However in any case if I just want to know where the point light is this will work just fine.
Here I have a method that I am using in this example to create a point light, add it to a given scene, and return a reference to that point light also in the process of doing so. I often like to take a more functional approach with helper functions, but threejs is a more object oriented type library so there are a lot of functions that mutate objects in place and so forth.
A point light by itself will not display anything in the scene, it will just shine light in all directions from the current location in which it is located. So for this example I added a Sphere for each point light as a way to see the current location of each point light in the example. When it comes to this mesh I can use something like the basic material if I want because it is a mesh that is closely related to a light source. However when it comes to mesh objects that I will be adding to the scene I will want to use some other material that will react to light, the basic material is not one such options with that. Now that I have this helpful add point light helper I think I will want another helper to add a mesh, then a setup where I create my scene object and so forth along with an animation loop in order to have a full example of some kind up and running.
Now that I have some methods that I can used to create one or more point lights and some cubes for starters, lets used those methods to add point lights and mesh objects to a scene object. So then first I will want a main scene object for that I just create a one with the THREE.Scene constructor. Once I have a scene object I can now use that add point light and add cube methods to add lights and cubes to the scene.
Once I have my scene and lights set up I can also setup a camera and a renderer as well that will be used to look at the scene from a given position and then render that view with the scene object using the renderer in the main animation loop that I will be getting to next
The result when this example is up and ruining is a cool little effect where I have all these point lights shining different colors on to cube objects that are skinned with a material that is while in color.
The point like is one of the typical light sources that I like to go with just about all of the time when I make my own three.js examples. However often do like to add an additional mesh to the light so that I know where the light source is while I am at it like I did with the example in this post. The other typical light source that I like to use is the ambient light, which is a way to just have a base amount of light for all the mesh objects in the scene. So ambient light and point lights are mu usual go to light sources. However there are still some additional options that might prove to be a better choice in some situations. It is said that a directional light instance would be best to reproduce day light, and also now and then it might be a good idea to go with a spot light actually.