Threejs Materials

Three.js Materials is a community skill for configuring materials and shading in Three.js, covering standard materials, physical materials, texture mapping, transparency, and custom shader materials for realistic 3D surface rendering.

What Is This?

Overview

Three.js Materials provides guidance on defining surface appearance for 3D objects in Three.js. It covers standard materials that offer metallic-roughness workflows for physically based rendering, physical materials that extend standard materials with clearcoat, sheen, and transmission for advanced surfaces, texture mapping that applies diffuse, normal, and roughness maps for surface detail, transparency that configures opacity and alpha blending for glass and translucent effects, and custom shader materials that write GLSL code for unique visual effects. The skill helps developers create realistic surface appearance.

Who Should Use This

This skill serves web developers building product visualizations, creative coders designing shader effects, and 3D artists configuring materials for web delivery.

Why Use It?

Problems It Solves

Default materials produce flat unrealistic surfaces. Incorrect PBR settings create materials that look plastic or unnaturally bright. Texture configuration errors cause stretching, tiling artifacts, or wrong color space rendering. Custom visual effects require GLSL shader knowledge that most web developers lack.

Core Highlights

PBR configurator sets metalness and roughness for realistic surfaces. Texture mapper applies multiple map types for surface detail. Transparency manager handles opacity and blending modes. Shader builder creates custom materials with GLSL code.

How to Use It?

Basic Usage

// Material configuration
import * as THREE from
  'three';

const texLoader =
  new THREE
  .TextureLoader();

function createPBR(
  diffusePath,
  normalPath,
  roughnessPath
) {
  const diffuse =
    texLoader.load(
      diffusePath);
  diffuse.colorSpace =
    THREE.SRGBColorSpace;

  const normal =
    texLoader.load(
      normalPath);
  const roughness =
    texLoader.load(
      roughnessPath);

  return new THREE
    .MeshStandardMaterial({
      map: diffuse,
      normalMap: normal,
      roughnessMap:
        roughness,
      metalness: 0.0,
      roughness: 1.0
    });
}

function createGlass() {
  return new THREE
    .MeshPhysicalMaterial({
      transmission: 0.95,
      thickness: 0.5,
      roughness: 0.05,
      ior: 1.5,
      transparent: true
    });
}

const wood = createPBR(
  'wood_diff.jpg',
  'wood_norm.jpg',
  'wood_rough.jpg');
const glass =
  createGlass();
console.log(
  'Materials created');

Real-World Examples

// Custom shader material
import * as THREE from
  'three';

class GradientMaterial
  extends THREE
  .ShaderMaterial {
  constructor(
    color1, color2
  ) {
    super({
      uniforms: {
        uColor1: {
          value:
            new THREE.Color(
              color1) },
        uColor2: {
          value:
            new THREE.Color(
              color2) },
        uTime: {
          value: 0 }
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position =
            projectionMatrix
            * modelViewMatrix
            * vec4(
              position,
              1.0);
        }`,
      fragmentShader: `
        uniform vec3
          uColor1;
        uniform vec3
          uColor2;
        uniform float
          uTime;
        varying vec2 vUv;
        void main() {
          float t =
            vUv.y +
            sin(uTime)
            * 0.1;
          vec3 color =
            mix(uColor1,
              uColor2, t);
          gl_FragColor =
            vec4(
              color, 1.0);
        }`
    });
  }

  update(time) {
    this.uniforms
      .uTime.value = time;
  }
}

const gradient =
  new GradientMaterial(
    0xff0000, 0x0000ff);
// In render loop:
// gradient.update(
//   clock.getElapsedTime());

Advanced Tips

Set colorSpace to SRGBColorSpace on diffuse textures and leave normal and roughness maps in linear space for correct PBR. Use MeshPhysicalMaterial for glass, water, and coated surfaces that need transmission and clearcoat. Extend ShaderMaterial for custom effects while keeping PBR compatibility through onBeforeCompile.

When to Use It?

Use Cases

Configure PBR materials for a product viewer with realistic metallic and wood surfaces. Create glass and water effects using physical material transmission properties. Build animated shader materials for stylized visual effects.

Related Topics

Three.js, PBR, materials, textures, GLSL shaders, WebGL, physically-based rendering, and surface appearance.

Important Notes

Requirements

Three.js library with MeshStandardMaterial for PBR rendering. Texture images in appropriate formats with correct resolution for web delivery. GLSL knowledge for writing custom vertex and fragment shader code.

Usage Recommendations

Do: use environment maps alongside PBR materials for realistic reflections that complete the lighting model. Compress textures to web-appropriate sizes since large maps consume GPU memory. Test materials under multiple lighting conditions to verify appearance.

Don't: set both metalness and roughness to zero since this creates an unrealistic perfectly smooth mirror. Use transparent materials without setting the transparent flag to true. Mix color spaces between texture maps since this produces incorrect shading.

Limitations

Custom shaders require GLSL programming knowledge beyond typical web development skills. Physical material features like transmission add significant rendering cost. Mobile GPUs may not support all material features at full quality.