In three.js The basic material seems to come up a lot, for example it is the default material that is used when creating a Mesh if a material is not specified. Also it is still a decent material if you want to just skin a mesh with a texture and do not want to do anything special involving the reflection of light, and many other maps other than a color map.
So today I thought I would continue expanding my collection of posts on three.js by writing a post on the basic material, and what it has to offer when making a three.js project.
This is a post on the basic material used in three.js, one of several options when it comes to skinning a mesh object. If you are new to three.js, you might want to start with my getting started post on three.js. You might also want to check out my post on three.js materials in general for more posts on the various material options in threejs.
The Basic material is the default material used for a mesh so if I just directly add a Mesh to a scene without giving a material, the mesh will used the basic material with a random color for the color property of the basic material instance.
Typically I will want to use the MeshBasicMaterial constructor to create an instance of basic material thought. This will be necessary if I want to set at least one property of the material that is not a default value for the property in question. When it comes to property options for the basic material if I just want to set a solid color for the whole material then the color option would be one way to go about doing that.
This results in a cube that is sold green all over. There is no sense of depth on the cube, and if I add a light nothing will change. That is okay though because if I want to do anything with light I would want to use another material such as the standard material.
If I do not want to use a solid color, but a texture then I can use the map property to do so.With that said lets look at another example of the basic material that does just that.
I have written a post on using canvas as a texture in which I covered this in further detail, but the basic idea is there.
The basic material is just as the name suggests, there are other materials to use in three.js if you want to do something more advanced but the basic material gets the job done when it comes to simple projects. There is of course the Lambert material that is a good choice if you want to do something involving light in a real time environment. There are of course many other materials to chose from when working with a mesh as well that might have better values to offer when it comes to how things look compared to how much resources they eat up.