Materials
Three.js materials.
by Lea Rosema
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.
Line-based materials
anchorLineBasicMaterial
and LineDashedMaterial
used for dashed wireframe materials. This material is not affected by lights.
MeshBasicMaterial
anchorMeshBasicMaterial
is a basic material with a fixed texture or color. Not affected by lights.
MeshMatcapMaterial
anchorMeshMatcapMaterial
is defined by a Matcap, which encodes the material color and shading.
Not affected by lights.
MeshLambertMaterial
anchorMeshLambertMaterial
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
anchorMeshPhongMaterial
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
anchorMeshStandardMaterial
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
anchorMeshPhysicalMaterial
is an extension to MeshStandardMaterial
providing more advanced PBR properties. Higher performance cost.
- Clearcoat
- Physically-based transparency
- Advanced reflectivity
ShaderMaterial
anchorShaderMaterial
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
).