by Lea Rosema
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.
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
MeshLambertMaterial but somewhat more computationally expensive.
- Physically-based transparency
- Advanced reflectivity
Check out the following Codepen demo for an example using custom shaders as material.
There are two planes in the scene using the
The coordinates of the ground plane are shifted by the vertex shader (
landscapeShader.vert) the black/white colorization is done in the fragment shader