Materials and textures 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: 1, 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();

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);

Demo