Materials

A Material is basically what you layer on top of a 3D object, to control the way the object is perceived when rendered. Three.js provides several materials.

LineBasicMaterial and LineDashedMaterial used for dashed wireframe materials. This material is not affected by lights.

MeshBasicMaterial is a basic material with a fixed texture or color. Not affected by lights.

MeshMatcapMaterial is defined by a Matcap, which encodes the material color and shading.

Not affected by lights.

MeshLambertMaterial is a material for non-shiny surfaces without specular highlights.

• uses the Lambertian model for calculating reflectance
• uses Goraud shading. Shading is calculated per vertex and interpolates the results over the faces.

MeshPhongMaterial is a material for shiny surfaces with specular highlights.

• uses the Blinn-Phong model model for calculating reflectance.
• uses Phong shading. Calculating is done per pixel, thus more accurate than goraud shading.

MeshStandardMaterial is a standard physically based material.

Physically based rendering (PBR) has become standard in many 3D applications. More accurate and realistic result than MeshPhongMaterial or MeshLambertMaterial but somewhat more computationally expensive.

Best results with an environment map. See this example.

MeshPhysicalMaterial is an extension to MeshStandardMaterial providing more advanced PBR properties. Higher performance cost.

• Clearcoat
• Physically-based transparency
• Advanced reflectivity

ShaderMaterial is a material rendered with custom shaders. Shaders are small functions writtn in GLSL that run on the GPU. Theres also a GLSL language overview in the WebGL section of this site.

Check out the following Codepen demo for an example using custom shaders as material. There are two planes in the scene using the ShaderMaterial. The coordinates of the ground plane are shifted by the vertex shader (landscapeShader.vert) the black/white colorization is done in the fragment shader (landscapeShader.frag).