Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of materials in Three.js all of which have different properties, like responding to lights, mapping textures, and adjusting opacity.
Basic Material
The most basic material is the MeshBasicMaterial. You can pass a color in as a parameter to get a solid colored object, which has no shading. You can also adjust the opacity by passing in the opacity as a parameter with a value from 0 to 1 and setting transparent to true.
var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true, opacity: 0.5});
Normal Material
Another material we have is MeshNormalMaterial. This colors the faces of the mesh differently based on the face’s normal or what direction they are facing.
var material = new THREE.MeshNormalMaterial();
Lambert Material
For allowing our material to respond to lights MeshLambertMaterial will give our geometry shading with a dull surface. Lambert is a common material in most 3D applications. Just like before we can adjust the color. It also has an emissive property which adds a glow like color to the material.
var material = new THREE.MeshLambertMaterial({color: 0xff0000, transparent: true, opacity: 0.5});
Phong Material
Similar to Lambert MeshPhongMaterial responds to lights but adds a metallic luster to the surface, reflecting light with more intensity. You can also add a specular color and adjust the shininess property of this material to adjust the intensity of the light reflection.
var material = new THREE.MeshPhongMaterial({shininess: 1});
Standard Material
MeshStandardMaterial aims to combine Lambert and Phong into a single material. It has properties for roughness and metalness and adjusting these can create both dull or metallic looking surfaces.
var material = new THREE.MeshStandardMaterial({metalness: 0, roughness: 0.5});
Depth Material
A different kind of material is MeshDepthMaterial which draws the meshes grayscale from black to white based on the depth of the content.
var material = new THREE.MeshDepthMaterial();
All of the materials we have discussed so far are mesh materials because they are applied to meshes. However there are other kinds of geometric objects within Three.js which have their own special materials.
Line Material
To draw a Line we must utilize LineBasicMaterial. This works similarly to MeshBasicMaterial. There is also a LineDashedMaterial, which allows you to set the dashSize and gapSize on your line. For dashed lines to work however you need to call a method on your geometry called computeLineDistances() which uses the distance of the line to draw the dashes the correct size.
var material = new THREE.LineDashedMaterial({dashSize: 2, gapSize: 2});
geometry.computeLineDistances();
var line = new THREE.Line(geometry, material);
Points Material
Similar to drawing a Line, Points require the use of PointsMaterial.
var material = new THREE.PointsMaterial({color: 0xF3FFE2});
var points = new THREE.Points(geometry, material);
Sprite Material
Another special kind of material is SpriteMaterial, which can take a texture map and be applied to a Sprite. Sprite’s are a special kind of plane that are always facing the camera.
var material = new THREE.SpriteMaterial({map: "mytexture.png"});
var sprite = new THREE.Sprite(material);
Materials and their parameters combined with lights add a lot to the look and feel of 3D content. Playing around with these alone can create some amazing visuals.
Click here to download the demo.
Note: these examples were created using Three.js v79. Three.js is known to update frequently and sometimes cause breaking changes to the API so it may be worth checking the version you are using.