Skip to main content

🗓️ 29042024 1830
📎

materials

  • materials - used to put a color on each visible pixel of the geometries
  • shaders - programs that decide on the color of each pixel
  • Three.js has many built-in materials with pre-made shaders
/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader();

const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAlphaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAmbientOcclusionTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
const doorNormalTexture = textureLoader.load("./textures/door/normal.jpg");
const doorMetalnessTexture = textureLoader.load(
  "./textures/door/metalness.jpg"
);
const doorRoughnessTexture = textureLoader.load(
  "./textures/door/roughness.jpg"
);
const matcapTexture = textureLoader.load("./textures/matcaps/1.png");
const gradientTexture = textureLoader.load("./textures/gradients/3.jpg");

doorColorTexture.colorSpace = THREE.SRGBColorSpace;
matcapTexture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshBasicMaterial({ map: doorColorTexture });
INFO

  • textures used as map and matcap are supposed to be encoded in sRGB 

  • colorSpace needs to be set

MeshBasicMaterial​

const material = new THREE.MeshBasicMaterial({
  map: doorColorTexture,
});

// Equivalent
const material = new THREE.MeshBasicMaterial();
material.map = doorColorTexture;

Map​

material.map = doorColorTexture;

apply a texture on the surface of the geometry

Color​

// material.map = doorColorTexture
material.color = new THREE.Color("#ff0000");
material.color = new THREE.Color("#f00");
material.color = new THREE.Color("red");
material.color = new THREE.Color("rgb(255, 0, 0)");
material.color = new THREE.Color(0xff0000);

applies a uniform color on the surface of the geometry

material.map = doorColorTexture;
material.color = new THREE.Color("#ff0000");

tints the texture with the Color

Wireframe​

// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
material.wireframe = true;

show the triangles that compose your geometry

Opacity​

// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
material.transparent = true;
material.opacity = 0.5;

AlphaMap​

// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
material.transparent = true;
// material.opacity = 0.5
material.alphaMap = doorAlphaTexture;

for controlling transparency

Side​

// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
// material.transparent = true
// material.opacity = 0.5
// material.alphaMap = doorAlphaTexture
material.side = THREE.DoubleSide;
  • FrontSide (default), BackSide, DoubleSide
  • avoid DoubleSide when possible

MeshNormalMaterial​

const material = new THREE.MeshNormalMaterial();

  • use cases
  • Calculating illumination / reflection / refraction
  • Normal relative to camera
  • Has MeshBasicMaterial properties

material.flatShading = true;

flattens the surfaces (normals not interpolated between vertices)

MeshMatcapMaterial​

  • looks great and is performant
  • Requires sphere looking texture
  • Similar concept to baking? (final result is not responsive to light changes)
  • Sources
WARNING

Note that licenses aren’t all verified and you might not be allowed to use them other than for personal projects.

const material = new THREE.MeshMatcapMaterial();
material.matcap = matcapTexture;

const matcapTexture = textureLoader.load("/textures/matcaps/2.png");
const matcapTexture = textureLoader.load("/textures/matcaps/3.png");
const matcapTexture = textureLoader.load("/textures/matcaps/4.png");
const matcapTexture = textureLoader.load("/textures/matcaps/5.png");
const matcapTexture = textureLoader.load("/textures/matcaps/6.png");
const matcapTexture = textureLoader.load("/textures/matcaps/7.png");
const matcapTexture = textureLoader.load("/textures/matcaps/8.png");

MeshDepthMaterial​

  • simply colors the geometry in:
    • white if it's close to the camera's near value
    • black if it's close to the far value of the camera
// // MeshMatcapMaterial
// const material = new THREE.MeshMatcapMaterial()
// material.matcap = matcapTexture

// MeshDepthMaterial
const material = new THREE.MeshDepthMaterial();

MeshLambertMaterial​

  • requires light to be seen
  • supports the same properties as the MeshBasicMaterial
  • most performant material that uses lights
    • but bruno says that there are some weird patterns idk
const material = new THREE.MeshLambertMaterial();

MeshPhongMaterial​

  • very similar to the MeshLambertMaterial
  • strange patterns are less visible
  • can also see the light reflection on the surface of the geometry
  • less performant than MeshLambertMaterial (but doesn't really matter at this level)
  • paramters
    • shininess - higher values > shinier
    • specular - controls color of reflection
const material = new THREE.MeshPhongMaterial();

material.shininess = 100;
material.specular = new THREE.Color(0x1188ff);

MeshToonMaterial​

  • similar properties as  MeshLambertMaterialin terms of properties
  • cartoonish style
  • two-part coloration by default
    • one for the shadow
    • one for the light
  • can set gradientMap for more coloration
const material = new THREE.MeshToonMaterial();

// Cartoon effect doesn't really work when `gradientMap` is set because the GPU blends the colors
material.gradientMap = gradientTexture;

// Enables cartoon effect
gradientTexture.minFilter = THREE.NearestFilter;
gradientTexture.magFilter = THREE.NearestFilter;

// Can set this to false since THREE.NearestFilter doesn't use mipmaps
gradientTexture.generateMipmaps = false;

MeshStandardMaterial​

- uses physically based rendering principles

  • it supports lights but with a more realistic algorithm
  • has more parameters e.g.
    • roughness
    • metalness
  • environment map - image of what's surrounding the scene
  • Other properties
PropertyDescription
mapfor applying simple textures
aoMap (ambient occlusion)adds shadows where texture is dark
aoMapIntensitycontrols intensity of aoMap
displacementMapmoves the vertices to create true relief (might need to add more vertices to the geometries for it to look better)
displacementScale
metalnessMap
roughnessMap
normalMapfake the normal orientation and add details to the surface regardless of the subdivision
normalScaleVector2 object
transparent
alphaMap
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

const material = new THREE.MeshStandardMaterial();

material.metalness = 0.7;
material.roughness = 0.2;
material.map = doorColorTexture;
material.aoMap = doorAmbientOcclusionTexture;
material.aoMapIntensity = 1;
material.displacementMap = doorHeightTexture;

// Set `metalness` and `roughness` to 1 if these are parameters are set
material.metalnessMap = doorMetalnessTexture;
material.roughnessMap = doorRoughnessTexture;

material.normalMap = doorNormalTexture;

material.normalScale.set(0.5, 0.5);

material.transparent = true;
material.alphaMap = doorAlphaTexture;

/**
 * Environment map
 */
const rgbeLoader = new RGBELoader();
rgbeLoader.load("./textures/environmentMap/2k.hdr", (environmentMap) => {
  console.log(environmentMap);

  environmentMap.mapping = THREE.EquirectangularReflectionMapping;

  scene.background = environmentMap;
  scene.environment = environmentMap;
});

MeshPhysicalMaterial​

// Copy of MeshStandardMaterial parameters
const material = new THREE.MeshPhysicalMaterial();
material.metalness = 1;
material.roughness = 1;
material.map = doorColorTexture;
material.aoMap = doorAmbientOcclusionTexture;
material.aoMapIntensity = 1;
material.displacementMap = doorHeightTexture;
material.displacementScale = 0.1;
material.metalnessMap = doorMetalnessTexture;
material.roughnessMap = doorRoughnessTexture;
material.normalMap = doorNormalTexture;
material.normalScale.set(0.5, 0.5);

// Clearcoat
material.clearcoat = 1;
material.clearcoatRoughness = 0;

// Sheen
material.sheen = 1;
material.sheenRoughness = 0.25;
material.sheenColor.set(1, 1, 1);

// Iridescence
material.iridescence = 1;
material.iridescenceIOR = 1;
material.iridescenceThicknessRange = [100, 800];

// Transmission
material.transmission = 1;
material.ior = 1.5;
material.thickness = 0.5;

Clearcoat​

simulate a thin layer of varnish on top of the actual material

  • This layer has its own reflective properties
  • can still see the default material behind it
  • example

Sheen ​

highlights the material when seen from a narrow angle

  • can usually see this effect on fluffy material like fabric (gives it a soft feeling)
  • example

Iridescence​

effect where color artifacts are visible

  • Examples

Add the iridescence, iridescenceIOR, and iridescenceThicknessRange properties with their respective tweaks:

Transmission​

enable light to go through the material

  • more than just transparency with opacity
    • image behind the object gets deformed
  • example
  • for translucent effect
  • ior
  • thickness
    • a fixed value
    • the actual thickness of the object isn’t taken into account
WARNING

Worst material in terms of performance

PointsMaterial​

  • handle particles
    • size
    • color
    • what’s drawn in them
    • etc.

ShaderMaterial and RawShaderMaterial​

NOTE

Covered in a later chapter

References

  • ThreeJS Chapter 1 Lesson 11