tadams95/threejs-materials

Three.js Materials

Material Types

| Material | Use Case | Lighting | |----------|----------|----------| | MeshBasicMaterial | Unlit, flat colors | No | | MeshLambertMaterial | Matte surfaces | Yes (diffuse) | | MeshPhongMaterial | Shiny surfaces | Yes | | MeshStandardMaterial | PBR, realistic | Yes (PBR) | | MeshPhysicalMaterial | Advanced PBR | Yes (PBR+) | | ShaderMaterial | Custom GLSL | Custom |

MeshStandardMaterial (PBR)

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.0,
  map: colorTexture,
  normalMap: normalTexture,
  roughnessMap: roughTexture,
  metalnessMap: metalTexture,
  aoMap: aoTexture,
  emissive: 0x000000,
  emissiveIntensity: 1,
  envMap: envTexture,
  envMapIntensity: 1,
});

// AO map requires second UV channel
geometry.setAttribute("uv2", geometry.attributes.uv);

MeshPhysicalMaterial

const glass = new THREE.MeshPhysicalMaterial({
  transmission: 1,
  thickness: 0.5,
  ior: 1.5,
  roughness: 0,
  metalness: 0,
});

const carPaint = new THREE.MeshPhysicalMaterial({
  clearcoat: 1,
  clearcoatRoughness: 0.1,
  metalness: 0.9,
  roughness: 0.5,
});

ShaderMaterial

const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 color;
    void main() {
      gl_FragColor = vec4(color, 1.0);
    }
  `,
});

// Update uniform
material.uniforms.time.value = clock.getElapsedTime();

Common Properties

material.transparent = true;
material.opacity = 0.5;
material.side = THREE.DoubleSide;
material.wireframe = true;
material.depthTest = true;
material.depthWrite = true;

Environment Maps

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

new RGBELoader().load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
});