There are a whole lot of other options when it comes to mesh materials so it would be a good idea to review them all. The Phong material is a good choice when it comes to how an object looks when one or more materials are used, mainly because of the shinny over all look. Still even when it comes to just caring about how things look the Phong might not be the only solution. If a surface of an object should be a kind of unpolished wood, then it might be a good idea to tone down the shininess option of the Phong Material, or maybe even use a whole other material such as the Lambert Material.
The Phong material is one of several options that will respond to one or more light sources in a scene. The options for light objects in threejs is a whole other matter that I would not like to get into in detail in this post. In these source code examples I will just be sticking mainly with the directional light, if you want to read more about lights then you will need to do so outside of this post.
When I first wrote this blog post I was using r146 of threejs. With that said at the time of this writing there are a whole lot of code breaking changes that will be happening up ahead when it comes to future revisions of the library. Please always be aware of what revision you are using and if possible try to find out what revision an author of code examples was using at the time they wrote a post of possible as well. Threejs is still a very fast moving library in terms of development.
The very first example should be as basic as I can make things, so with that said I think the first example should involve making use of the phong material without a light source. The problem with that is that the default color of a scene object is black, and setting the color option of the Phong material will not have the ame effect as what some devlopers that are new to threejs might be used to when it comes to the basic material. I rember way back when I was frist starting out with threejs that I have found this to be a little confusing, so I will try my best to adress that here in this basic section.
Because the Phong material is an example of a mesh material option that will respond to light, the color option of the phong material is used to set the color that will be used with a light source. If you want to have the same effect with the color option of the basic material, with the Phong material, or any material that responds to light, then the emissive color is what you want to set.
The Phong material, and other mesh materials can still be used in the same way as the basic material. It is just a matter of knowing what options to set that can now be used in place of what is used with the basic material. The difference is now that on top of setting base solid color and texture that will show up regardless of what the situation is with light in a scene, additional colors and textures can be set that will work with light sources.
If I am going to add one or more light sources to a scene object, then I can just create the Phong material without any options. For this example I am making use of a directional light as a way to set a light source for the scene. This kind of light source is my default go to light source these days, there are of course a number of other options to consider but getting into that would be off topic. The directional light is night because I do not have to care about the position of the light source as it is used to create light in a way that is like that of day light. In this example I may be setting the position value, however it is just the direction of the Vector3 object that is of concern and not the unit length. So then any vector that is normalized to a value of one will work just fine. It would also seem that it is also okay if the Vector is not normalized in such cases the higher or lower length will be ignored and again it is just the direction that matters.
For this example I will now be adding some textures into the mix, as such this is where things will start to get a little involved. There are a number of ways to create a texture object that can then be used with one or more of the various map options there are to work with in the Phong material. I could for example make use of the texture loader as a way to load one or more external image files that I can then use for the material. However in this basic section i would like to keep these examples very copy and paste friendly as such I will be going with canvas textures.
One of the major features of the Phong material is that it can be used to add a specular effect that will result in a shine kind of effect for the material that will be effected by light sources. There is a shininess option that will default to a value of 30 that can be used to increase or decrease the magnitude of this shine effect. There is also a specular option that is like the color and emissive options I that it can be used to set a color value, however this time it will effect the color that is used for this shine effect. There is also a specular map option, but that is a more advanced option that will come into play when working out environment maps.
The Phong material is then a pretty good over all material that might prove to be the standard go to material for many good reasons. As of late I would have to say that this is the case with me thus far as I am starting to prefer using the Phong material over the standard material, and the Lambert material. Keep in mind though many of the projects that i work on are geared more with a situation where the way that things look is the most important thus far, and then predominance related concerns come second. If performance is the most important thing thus far then it might be the Lambert material that you might want to take into account first and foremost if you are going to and a material that will work with lights.