In three js there is a number of options when it comes to light sources for materials that respond to light, but my favorite option for the most part would be the three js point light. This lighting option can be sued to shine light in all directions from a single given point.
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.
In this post I will be going over some quick examples of the point light in three js as well as touching base on some other three js related topics as well, so lets get to it.
This example I put together makes use of a few point lights that shine light in all directions in a three.js scene. In addition to having some point lights in a scene there is also a need to have some objects in the scene as well, so for this example I also made a method that creates cubes as well.
Here I have a method that I used in this example to create a point light, add it to a given scene, and return a reference to that point light as well. A point light by itself will not display anything in the scene 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 creating any kind of mesh for these scene it is important to use a material that will respond to light of course, si I am using the standard material rather than the basic material for the cubes.
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 create a scene. I just create a new three.js scene with the THREE.Scebe constructor, and then I can use that scene with my add point light and add cube methods.
Here I can also setup a camera and the renderer as well. However I cam not calling the render method of the renderer here, I course if I just wanted to make it a static scene, but I want this example to be a cool little animation so I will do that in the loop of this project.
Here I have the loop of the project in which I will be rendering the current state of the scene as well as updating the scene as well.
The point like is one of the typical light sources that I like to go with. Of 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. 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.