Materials in Three.js: An Overview with Examples and Parameters

Three.js is a popular JavaScript library for creating 3D graphics and animations in the browser. It provides a wide range of materials that can be used to create a variety of visual effects and textures. From basic materials to more advanced options like ShaderMaterial, Three.js has you covered. In this article, we’ll provide an overview of each material type, with example code and a complete list of parameters.

Three.js supports the following materials:

Basic Material: The simplest material that applies a solid color to the surface of an object. The color can be changed using the “color” parameter.
Lambert Material: A non-shiny material that simulates diffuse reflection, making objects appear flat and matte. The “color” parameter can be used to set the material’s color, and the “emissive” parameter can be used to set a glowing effect.
Phong Material: A shiny material that simulates specular reflection and can produce highlights on object surfaces. The “color” parameter sets the material’s color, and the “specular” parameter sets the highlight color.
Standard Material: A physically-based material that can produce realistic reflections, refractions, and lighting. The “color” parameter sets the material’s color, and the “metalness” parameter controls the shininess of the material.
Physical Material: A high-quality physically-based material that uses advanced lighting and reflection calculations to produce accurate results.
Normal Material: A material that displays the surface normals of an object, which can be useful for debugging.
Toon Material: A material that simulates a cartoon-style look by limiting the range of color values and creating flat shading.
Depth Material: A material that displays the depth values of an object, which can be used for creating depth-based effects such as volumetric fog.
Distance Material: A material that displays the distance from the camera to the surface of an object, which can be used for creating distance-based effects such as gradient fog.
Sprite Material: A material that can be used to create 2D images, such as particle effects or billboarded objects.
Raw Shader Material: A material that allows custom shaders to be written using the GLSL programming language.
Shader Material: A material that allows custom shaders to be written using the Three.js ShaderMaterial API.

Note: These materials define the appearance of 3D objects in a scene and determine how they respond to light sources and shadows. The choice of material depends on the desired visual appearance and performance requirements of the project.

Basic Material

Here is an example of how to create a basic material in Three.js:

const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: false
});

MeshBasicMaterial is a type of material in Three.js that applies a solid color to the surface of an object. The color parameter sets the color of the material, and the wireframe parameter determines whether or not the object should be drawn as a wireframe.

Complete list of parameters for MeshBasicMaterial:

color (default: 0xffffff): Sets the color of the material. This can be specified as an RGB hexadecimal value, such as 0xffffff for white.
wireframe (default: false): Determines whether or not the object should be drawn as a wireframe. If set to true, the object will be drawn as a series of connected lines, rather than a solid surface.
wireframeLinewidth (default: 1): Specifies the width of the lines used to draw the wireframe.
fog (default: true): Specifies whether or not the material is affected by fog. If set to false, the material will not be affected by fog, regardless of the global fog settings.

The basic material is the simplest material in Three.js and is used to apply a solid color to the surface of an object. It is the fastest material to render, as it does not require any lighting or shading calculations. It is best used for objects that do not require shading, such as backgrounds or flat, single-color objects.

In order to use a basic material, you need to create a new instance of MeshBasicMaterial and pass any desired parameters as an options object. You can then assign the material to a mesh using the material property, such as:

const mesh = new THREE.Mesh(geometry, material);

where geometry is an instance of a Three.js geometry, such as BoxGeometry.

Lambert Material

Here is an example of how to create a Lambert material in Three.js:

const material = new THREE.MeshLambertMaterial({
  color: 0xffffff,
  emissive: 0x000000,
  emissiveIntensity: 1,
  lights: true
});

MeshLambertMaterial is a type of material in Three.js that simulates diffuse reflection, making objects appear flat and matte. The color parameter sets the color of the material, while the emissive parameter sets the color of the material’s glow. The emissiveIntensity parameter sets the intensity of the glow, and the lights parameter determines whether or not the material should respond to lights in the scene.

Complete list of parameters for MeshLambertMaterial:

color (default: 0xffffff): Sets the color of the material. This can be specified as an RGB hexadecimal value, such as 0xffffff for white.
emissive (default: 0x000000): Specifies the color of the material’s glow. This can be specified as an RGB hexadecimal value.
emissiveIntensity (default: 1): Specifies the intensity of the material’s glow. This value is used to multiply the color specified by emissive.
lights (default: true): Specifies whether or not the material should respond to lights in the scene. If set to false, the material will not be affected by lights, and will appear flat and uniform.
reflectivity (default: 1): Specifies the amount of reflection on the material. A value of 1 means that the material will perfectly reflect the environment, while a value of 0 means that the material will not reflect the environment at all.
refractionRatio (default: 0.98): Specifies the amount of refraction on the material. A value of 1 means that the material will perfectly refract the environment, while a value of 0 means that the material will not refract the environment at all.
fog (default: true): Specifies whether or not the material is affected by fog. If set to false, the material will not be affected by fog, regardless of the global fog settings.

The Lambert material is best used for objects that do not require highlights or reflections, such as walls, ceilings, or flat objects. It is a good choice for objects that require a flat, matte appearance, as it does not produce any specular highlights.

In order to use a Lambert material, you need to create a new instance of MeshLambertMaterial and pass any desired parameters as an options object. You can then assign the material to a mesh using the material property, such as:

const mesh = new THREE.Mesh(geometry, material);

where geometry is an instance of a Three.js geometry, such as BoxGeometry.

Phong Material

Here is an example of how to create a Phong material in Three.js:

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0xffffff,
  shininess: 30,
  lights: true
});

MeshPhongMaterial is a type of material in Three.js that simulates specular reflection and shininess, making objects appear glossy or shiny. The color parameter sets the color of the material, while the specular parameter sets the color of the specular highlight. The shininess parameter sets the size of the specular highlight, with a higher value resulting in a smaller, brighter highlight. The lights parameter determines whether or not the material should respond to lights in the scene.

Complete list of parameters for MeshPhongMaterial:

color (default: 0xffffff): Sets the color of the material. This can be specified as an RGB hexadecimal value, such as 0xffffff for white.
specular (default: 0x111111): Specifies the color of the material’s specular highlight. This can be specified as an RGB hexadecimal value.
shininess (default: 30): Specifies the size of the material’s specular highlight, with a higher value resulting in a smaller, brighter highlight.
emissive (default: 0x000000): Specifies the color of the material’s glow. This can be specified as an RGB hexadecimal value.
emissiveIntensity (default: 1): Specifies the intensity of the material’s glow. This value is used to multiply the color specified by emissive.
lights (default: true): Specifies whether or not the material should respond to lights in the scene. If set to false, the material will not be affected by lights, and will appear flat and uniform.
reflectivity (default: 1): Specifies the amount of reflection on the material. A value of 1 means that the material will perfectly reflect the environment, while a value of 0 means that the material will not reflect the environment at all.
refractionRatio (default: 0.98): Specifies the amount of refraction on the material. A value of 1 means that the material will perfectly refract the environment, while a value of 0 means that the material will not refract the environment at all.
fog (default: true): Specifies whether or not the material is affected by fog. If set to false, the material will not be affected by fog, regardless of the global fog settings.

The Phong material is best used for objects that require a glossy or shiny appearance, such as metal objects, mirrors, or objects with a smooth, polished surface.

In order to use a Phong material, you need to create a new instance of MeshPhongMaterial and pass any desired parameters as an options object. You can then assign the material to a mesh using the material property, such as:

const mesh = new THREE.Mesh(geometry, material);

where geometry is an instance of a Three.js geometry, such as BoxGeometry.

Standard Material

Here is an example of how to create a Standard material in Three.js:

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.5,
  lights: true
});

MeshStandardMaterial is a physically-based material in Three.js that simulates the appearance of a wide range of materials, including metal, plastic, and rough surfaces. The color parameter sets the color of the material, while the roughness parameter sets the roughness of the surface, with a value of 0 meaning a smooth, reflective surface and a value of 1 meaning a rough, non-reflective surface. The metalness parameter sets the metalness of the surface, with a value of 0 meaning a non-metallic surface and a value of 1 meaning a highly reflective metallic surface. The lights parameter determines whether or not the material should respond to lights in the scene.

Complete list of parameters for MeshStandardMaterial:

color (default: 0xffffff): Sets the color of the material. This can be specified as an RGB hexadecimal value, such as 0xffffff for white.
roughness (default: 0.5): Specifies the roughness of the material’s surface, with a value of 0 meaning a smooth, reflective surface and a value of 1 meaning a rough, non-reflective surface.
metalness (default: 0): Specifies the metalness of the material’s surface, with a value of 0 meaning a non-metallic surface and a value of 1 meaning a highly reflective metallic surface.
emissive (default: 0x000000): Specifies the color of the material’s glow. This can be specified as an RGB hexadecimal value.
emissiveIntensity (default: 1): Specifies the intensity of the material’s glow. This value is used to multiply the color specified by emissive.
lights (default: true): Specifies whether or not the material should respond to lights in the scene. If set to false, the material will not be affected by lights, and will appear flat and uniform.
reflectivity (default: 1): Specifies the amount of reflection on the material. A value of 1 means that the material will perfectly reflect the environment, while a value of 0 means that the material will not reflect the environment at all.
refractionRatio (default: 0.98): Specifies the amount of refraction on the material. A value of 1 means that the material will perfectly refract the environment, while a value of 0 means that the material will not refract the environment at all.
fog (default: true): Specifies whether or not the material is affected by fog. If set to false, the material will not be affected by fog, regardless of the global fog settings.

The Standard material is best used for objects that require a physically-based appearance, such as realistic objects made of metal, plastic, or other materials.

In order to use a Standard material, you need to create a new instance of MeshStandardMaterial and pass any desired parameters as an options object. You can then assign the material to a mesh using the material property, such as:

const mesh = new THREE.Mesh(geometry, material);

where geometry is an instance of a Three.js geometry, such as BoxGeometry.

Physical Material

Here is an example of how to create a Physical material in Three.js:

const material = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.5,
  reflectivity: 0.5,
  clearCoat: 0.5,
  clearCoatRoughness: 0.5,
  lights: true
});

MeshPhysicalMaterial is a physically-based material in Three.js that simulates the appearance of a wide range of materials, including metal, plastic, and rough surfaces. The color parameter sets the color of the material, while the roughness parameter sets the roughness of the surface, with a value of 0 meaning a smooth, reflective surface and a value of 1 meaning a rough, non-reflective surface. The metalness parameter sets the metalness of the surface, with a value of 0 meaning a non-metallic surface and a value of 1 meaning a highly reflective metallic surface. The reflectivity parameter sets the reflectivity of the material, with a value of 1 meaning a perfectly reflective surface and a value of 0 meaning no reflection at all. The clearCoat parameter sets the clear coat reflectance of the surface, with a value of 1 meaning a highly reflective surface and a value of 0 meaning no clear coat at all. The clearCoatRoughness parameter sets the roughness of the clear coat layer, with a value of 0 meaning a smooth surface and a value of 1 meaning a rough surface. The lights parameter determines whether or not the material should respond to lights in the scene.

Complete list of parameters for MeshPhysicalMaterial:

color (default: 0xffffff): Sets the color of the material. This can be specified as an RGB hexadecimal value, such as 0xffffff for white.
roughness (default: 0.5): Specifies the roughness of the material’s surface, with a value of 0 meaning a smooth, reflective surface and a value of 1 meaning a rough, non-reflective surface.
metalness (default: 0): Specifies the metalness of the material’s surface, with a value of 0 meaning a non-metallic surface and a value of 1 meaning a highly reflective metallic surface.
emissive (default: 0x000000): Specifies the color of the material’s glow. This can be specified as an RGB hexadecimal value.
emissiveIntensity (default: 1): Specifies the intensity of the material’s glow. This value is used to multiply the color specified by emissive.
lights (default: true): Specifies whether or not the material should respond to lights in the scene. If set to false, the material will not be affected by lights, and will appear flat and uniform.
reflectivity (default: 1): Specifies the amount of reflection on the material. A value of 1 means that the material will perfectly reflect the environment, while a value of 0 means that the material will not reflect the environment at all.
clearCoat (default: 0): Specifies the clear coat reflectance of the material, with a value of 1 meaning a highly reflective surface and a value of 0 meaning no clear coat at all.
clearCoatRoughness (default: 0): Specifies the roughness of the clear coat layer, with a value of 0 meaning a smooth surface and a value of 1 meaning a rough surface.

Physical materials are best used when you want to create a realistic and physically-based look for your objects. They are ideal for creating materials that simulate metal, plastic, glass, and other materials that have complex reflectivity and light scattering properties. They are also useful for creating materials that have clear coat reflections, such as car paint, and materials with a rough or bumpy surface, such as sand or stone. To get the most out of physical materials, it is recommended to use them in conjunction with high-quality lighting and environment maps that provide accurate reflections and shadows.

Normal Material

Here is an example of how to create a Normal material in Three.js:

const material = new THREE.MeshNormalMaterial();

The MeshNormalMaterial is a simple material that is used to visualize the normals of a mesh. It is useful for debugging the geometry of a mesh and can also be used to create a simple, non-realistic representation of an object.

The MeshNormalMaterial does not have any parameters, as it simply uses the normal vectors of the mesh to determine the shading of the object. The shading will change based on the position and orientation of the lights in the scene.

Here is the complete list of parameters for MeshNormalMaterial:

None

Normal materials are best used for debugging purposes, or for creating simple representations of objects where the actual geometry and shading are not as important as the overall shape and orientation of the object. They are not ideal for creating realistic materials, as they do not take into account lighting, reflectivity, or other properties that affect the appearance of materials in a physically-based way.

Toon Material

Here is an example of how to create a Toon material in Three.js:

const material = new THREE.MeshToonMaterial();

The MeshToonMaterial is a material that is used to create a toon or cartoon-style shading on a mesh. It uses a non-photorealistic shading model that is designed to give objects a flat, two-dimensional look, similar to the shading seen in comic books or cartoons.

The MeshToonMaterial does not have any parameters, but it can be customized by changing the lighting and environment of the scene. To get the best results, it is recommended to use the Toon material in conjunction with a simple, three-point lighting setup that provides strong directional lighting and cast shadows.

Here is the complete list of parameters for MeshToonMaterial:

None

Toon materials are best used for creating cartoon-style or non-photorealistic representations of objects. They are not ideal for creating realistic materials, as they use a non-physical shading model that does not take into account the reflectivity, subsurface scattering, or other properties that affect the appearance of materials in a physically-based way. Toon materials are best used in stylized or artistic projects where a flat, two-dimensional look is desired.

Depth Material

Here is an example of how to create a Depth material in Three.js:

const material = new THREE.MeshDepthMaterial();

The MeshDepthMaterial is a material that is used to visualize the depth values of a mesh. It uses the Z-value of each vertex in the mesh to determine the shading of the object, with objects closer to the camera appearing lighter and objects farther away appearing darker.

The MeshDepthMaterial does not have any parameters, but it can be customized by changing the near and far planes of the camera. This will determine the range of depth values that are used to calculate the shading of the object.

Here is the complete list of parameters for MeshDepthMaterial:

None

Depth materials are best used for debugging purposes, or for creating special effects that involve depth-based shading, such as outline shaders or depth of field effects. They are not ideal for creating realistic materials, as they do not take into account lighting, reflectivity, or other properties that affect the appearance of materials in a physically-based way.

Distance Material

Here is an example of how to create a Distance material in Three.js:

const material = new THREE.MeshDistanceMaterial({
  referencePosition: new THREE.Vector3(0, 0, 0)
});

The MeshDistanceMaterial is a material that is used to visualize the distance of a mesh from a reference position. It uses the distance of each vertex in the mesh to the reference position to determine the shading of the object, with objects closer to the reference position appearing lighter and objects farther away appearing darker.

The MeshDistanceMaterial has the following parameters:

referencePosition: A THREE.Vector3 that represents the reference position from which distances are calculated. This position determines the center of the distance-based shading.

Here is the complete list of parameters for MeshDistanceMaterial:

referencePosition: A THREE.Vector3 that represents the reference position from which distances are calculated.

Distance materials are best used for creating special effects that involve distance-based shading, such as heat maps or gradient shaders. They are not ideal for creating realistic materials, as they do not take into account lighting, reflectivity, or other properties that affect the appearance of materials in a physically-based way.

Sprite Material

Here is an example of how to create a Sprite material in Three.js:

const material = new THREE.SpriteMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 1
});

The SpriteMaterial is a material that is used to create 2D images, such as sprites or icons, that are overlaid on top of the 3D scene. It uses a single texture to define the appearance of the sprite, and does not take into account lighting or other properties that affect the appearance of materials in a physically-based way.

The SpriteMaterial has the following parameters:

color: A hexadecimal color value that represents the color of the sprite.
transparent: A boolean value that determines whether the sprite is transparent or not.
opacity: A value between 0 and 1 that represents the opacity of the sprite.

Here is the complete list of parameters for SpriteMaterial:

color: A hexadecimal color value that represents the color of the sprite.
map: A THREE.Texture that represents the texture of the sprite.
alphaMap: A THREE.Texture that is used to control the opacity of the sprite.
transparent: A boolean value that determines whether the sprite is transparent or not.
opacity: A value between 0 and 1 that represents the opacity of the sprite.
fog: A boolean value that determines whether the sprite is affected by fog.

Sprite materials are best used for creating 2D images, such as icons, logos, or other types of annotations, that are overlaid on top of the 3D scene. They are not ideal for creating realistic materials, as they do not take into account lighting, reflectivity, or other properties that affect the appearance of materials in a physically-based way.

Raw Shader Material

Here is an example of how to create a RawShaderMaterial in Three.js:

const material = new THREE.RawShaderMaterial({
  uniforms: {
    time: { type: "f", value: 1.0 },
    resolution: { type: "v2", value: new THREE.Vector2() }
  },
  vertexShader: `
    uniform float time;
    uniform vec2 resolution;
    void main() {
      vec2 uv = gl_FragCoord.xy / resolution.xy;
      vec4 pos = vec4(uv * 2.0 - 1.0, sin(time + uv.x * 10.0), 1.0);
      gl_Position = pos;
    }
  `,
  fragmentShader: `
    uniform float time;
    void main() {
      gl_FragColor = vec4(vec3(sin(time)), 1.0);
    }
  `
});

The RawShaderMaterial is a material that allows you to write custom shaders to define the appearance of an object. Shaders are small programs that run on the GPU to process the appearance of a mesh. A shader consists of two parts: a vertex shader and a fragment shader. The vertex shader processes the vertices of a mesh, and the fragment shader processes the pixels (or fragments) that result from rasterizing the triangles that make up the mesh.

The RawShaderMaterial takes in two shaders, the vertex shader and the fragment shader, as well as a uniforms object. The uniforms object is a dictionary of values that can be passed into the shaders, and are typically used to control the appearance of the material.

The RawShaderMaterial has no parameters, as the appearance of the material is entirely defined by the shaders that you provide.

RawShaderMaterial is best used when you need to create highly custom materials that cannot be achieved using the built-in materials in Three.js. They are typically more difficult to work with than other materials, as you need to write custom shaders to define their appearance. However, they offer a great deal of flexibility and power, allowing you to create complex materials and visual effects.

Shader Material

Here is an example of how to create a ShaderMaterial in Three.js:

const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { type: "f", value: 1.0 },
    resolution: { type: "v2", value: new THREE.Vector2() }
  },
  vertexShader: `
    uniform float time;
    uniform vec2 resolution;
    void main() {
      vec2 uv = gl_FragCoord.xy / resolution.xy;
      vec4 pos = vec4(uv * 2.0 - 1.0, sin(time + uv.x * 10.0), 1.0);
      gl_Position = pos;
    }
  `,
  fragmentShader: `
    uniform float time;
    void main() {
      gl_FragColor = vec4(vec3(sin(time)), 1.0);
    }
  `
});

The ShaderMaterial is similar to the RawShaderMaterial but provides additional built-in uniforms and attributes that can be used to control the appearance of the material. Some of these include uDiffuse, uOpacity, uSpecular, uReflection, and uRefraction.

The ShaderMaterial takes in two shaders, the vertex shader and the fragment shader, as well as a uniforms object. The uniforms object is a dictionary of values that can be passed into the shaders, and are typically used to control the appearance of the material.

The ShaderMaterial has no parameters, as the appearance of the material is entirely defined by the shaders that you provide.

Like the RawShaderMaterial, the ShaderMaterial is best used when you need to create highly custom materials that cannot be achieved using the built-in materials in Three.js. They offer a great deal of flexibility and power, allowing you to create complex materials and visual effects.

In conclusion, Three.js provides a diverse set of materials that can be used to create a wide range of visual effects and textures. Whether you’re creating a basic scene or a complex material, Three.js has you covered. The different materials each have their own unique properties and parameters, so it’s important to choose the right one for your project. By understanding the different material types available in Three.js, you can create stunning 3D graphics and animations that truly stand out.