A long time ago I wrote a post on the basic material in three js, but oddly enough I never got around to writing a post on the standard material which is one of several options with materials that make use of light sources. When it comes to mesh materials in threejs the basic material is a nice starting point, and in some examples and projects in which I am not doing anything with light it might even get the job done just fine. However when it comes to working with everything that three.js has to offer when it comes to light sources, and the various kinds of texture maps there are to work with, the standard material is maybe one of the best all around options to work with.
There are some additional materials that might be worth mentioning as contenders when it comes to a great general use case material in three.js such as the Lambert material, and the phong material. The nice thing about the Lambert material is that it might eat up a little less processing overhead compared to the standard material, which might come in handy with certain kinds of projects. However over all the standard material seems to work fine on the systems that I test on, and also it might prove to reproduce more realistic lighting compared to the Lambert material.
I will not be going over all the little basics that you should know at this point, but I will be going over a few things that you might want to read up more on in this section.
The standard material is still just one of many options with the various mesh materials to work with in threejs. The standard material is a good option when it comes to creating a final state of a project, however there are a number of other options that work well as place holders when it comes to focusing on other aspects of a project that have to do with the state of a geometry.
There is the Mesh Normal Material that is great for seeing what the the current state of the normal attribute of a geometry is. Another good starting option is the depth material that will render the faces of a geometry based on the position of the geometry to a camera and the near and far settings of the camera.
One of the major reasons why I would use the standard material is because I want to do something involving one or more light sources. When it comes to the Basic Material I just need to worry about the color property when it comes to setting a solid color for the mesh. I then will maybe just use a color map with the basic material as a way to go about adding some texture.
I can do the same with the standard material as I would with the basic material, it is just that now I would want to set a solid color for the mesh using the emissve property rather than the color property in order to get the same effect. The reason why is that any color that I set with the color property with the standard material will only show up when a light source of some kind is present. The emissive map property is then what I would want to use in place of the map property with the basic material.
There are a number of options to chose from when it comes to light sources, the two I generally find myself going with are the point light, and an ambient light, but there are a lot of other options of course.
When I wrote this post I was using r127 of three.js which was a later version of threejs in early 2021, and the last time I came around to do a little editing I was using r135. I do not think much has changed with the standard material in some time now, but code breaking changes are made every now and then with many other aspects of the library.
The source code examples that I am writing about in this post can be found in my test threejs repository on Github.
First off lets start with a very basic example of the standard material, by creating a cube using the Box Geometry constructor for the geometry to use for the mesh object. Next I will create an instance of the standard material for the mesh that will use a solid color of red. However this will not work out as you might expect when it comes to using the basic material, as when I just use the standard material itself without a light source I will not see anything. The reason why is because a light source is needed in order to see the color, and if I want to have a color that will always show up no mater what I will want to use the emissive property.
For this example though I am not going to do anything to advanced when it comes to the emissive property and other related properties just a solid color. So I create the Mesh object with the THREE.Mesh constructor, and then pass the geometry that I want as the first argument, followed by the instance of the standard material created with the THREE.MeshStandardMaterial constructor. I then add the mesh object to the scene with the add method of the scene object.
I will then want to add at least one if not more light sources to the scene object. For this example I am going with the Point light which I create with the THREE.PointLight constructor. I could position this point light by itself and add it directly to the scene, but I often like to make it a child of another object in the scene such as another mesh object, or even a child of the camera. For this example I made it a child of a mesh object where I am using the sphere geometry for it along with the basic material. This way I can see where the point light is located in the scene.
Just like any other threejs example I will also want a camera and a renderer, for this example I went with the perspective camera and the Web GL renderer which are my usual suspects for just about everything that I do with threejs. With this example up and running I get a red cube, but the color will be a little different depending on the position of the point light and the location of the face of the cube.
To create canvas textures I will want to use the canvas texture constructor in thee.js, but first I will need a canvas element with the desired texture drawn on it to pass to the constructor. The topic of working with canvas elements is beyond the scope of this post of course, however I have a getting started post on canvas, as well as a lot of canvas example type posts when it comes to learning how to work with canvas elements. For more on this sort of thing when it comes to using canvas elements to create textures there is my post on the canvas texture constructor.
Now for one more map example this time using the emissve map option to make it so that the material will still show something at least even if there is not light at all. With the basic material there is just having a color map, but with the standard material the color map will only should up when there is some light. The functionally of the basic material color map can still show up though I just need to do so by having an emissve map.
In this example I am doing more or less the same thing with it comes to my color map example, but now I am also using the map I created with a canvas element for the emissve map also. When doing so I will want to set the solid emissive color to something other than black, and I will also typically want to adjust the intensity of this effect also.
Another options when it comes to something like this is to use some ambient light on top of a point light as this will make sure that the color map will always show up at least a little. However one nice thing about this is that I can make the emissive map something completely different from that of the regular color map.
More often than not the standard material is my default go to material that I use with just about every project in which I start playing around with light. There is a great deal more to write about when it comes to the various kind of maps to work with when it comes to using this material. When it comes to getting more into the details of this material I might come around to edit this post, or write some new ones as I get around to it. For now there is my main post on mesh materials in general in which I briefly go over most of the materials that are built into three.js.
I do get around to editing my posts on threejs now and then, so at some point I would like to expand this post with additional examples that make use of more of the features there are to work with when it comes to the standard material. One feature I would like to look into more is the metalness property.
There is also a kind of map that allows for me to set want areas of a face that will be effected more so than others when it comes to this feature. There are a number of other kinds of maps that I should work out examples for when it comes to this materials, the most pressing of which might be the environment map.