Skip to main content

Materials

Materials define the appearance and surface properties of 3D objects in Three.js.

Basic Materials​

MeshBasicMaterial​

const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: false,
  transparent: false,
  opacity: 1.0,
  side: THREE.FrontSide,
  fog: true,
});

MeshLambertMaterial​

const material = new THREE.MeshLambertMaterial({
  color: 0x00ff00,
  emissive: 0x000000,
  emissiveIntensity: 1,
  reflectivity: 1,
  refractionRatio: 0.98,
});

MeshPhongMaterial​

const material = new THREE.MeshPhongMaterial({
  color: 0x00ff00,
  specular: 0x111111,
  shininess: 100,
  emissive: 0x000000,
  emissiveIntensity: 1,
});

PBR Materials​

MeshStandardMaterial​

const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.5,
  metalness: 0.0,
  emissive: 0x000000,
  emissiveIntensity: 1,
  envMapIntensity: 1,
});

MeshPhysicalMaterial​

const material = new THREE.MeshPhysicalMaterial({
  color: 0x00ff00,
  roughness: 0.5,
  metalness: 0.0,
  clearcoat: 0.0,
  clearcoatRoughness: 0.0,
  transmission: 0.0,
  thickness: 0.0,
  ior: 1.5,
  sheen: 0.0,
  sheenRoughness: 1.0,
  sheenColor: 0x000000,
});

Textures​

Loading Textures​

const textureLoader = new THREE.TextureLoader();

// Load single texture
const texture = textureLoader.load('path/to/texture.jpg');

// Load with callbacks
const texture = textureLoader.load(
  'path/to/texture.jpg',
  // onLoad
  texture => {
    console.log('Texture loaded');
  },
  // onProgress
  progress => {
    console.log('Loading progress:', progress);
  },
  // onError
  error => {
    console.error('Error loading texture:', error);
  }
);

// Apply texture to material
const material = new THREE.MeshStandardMaterial({
  map: texture,
});

Texture Properties​

// Wrapping
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// Repeat
texture.repeat.set(4, 4);

// Offset
texture.offset.set(0.5, 0.5);

// Rotation
texture.rotation = Math.PI / 4;
texture.center.set(0.5, 0.5);

// Filtering
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipmapLinearFilter;

// Anisotropy
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

Texture Types​

const material = new THREE.MeshStandardMaterial({
  map: diffuseTexture, // Diffuse/albedo
  normalMap: normalTexture, // Normal map
  roughnessMap: roughnessTexture, // Roughness
  metalnessMap: metalnessTexture, // Metalness
  aoMap: aoTexture, // Ambient occlusion
  displacementMap: displacementTexture, // Displacement
  alphaMap: alphaTexture, // Alpha/transparency
  emissiveMap: emissiveTexture, // Emissive
  envMap: environmentTexture, // Environment
});

// UV2 for AO maps
geometry.setAttribute('uv2', new THREE.BufferAttribute(uvs, 2));

Cube Textures​

const cubeTextureLoader = new THREE.CubeTextureLoader();
const cubeTexture = cubeTextureLoader.load([
  'px.jpg',
  'nx.jpg', // positive x, negative x
  'py.jpg',
  'ny.jpg', // positive y, negative y
  'pz.jpg',
  'nz.jpg', // positive z, negative z
]);

// Use as environment map
const material = new THREE.MeshStandardMaterial({
  envMap: cubeTexture,
});

// Use as scene background
scene.background = cubeTexture;

Canvas Textures​

// Create canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 512;

// Draw on canvas
context.fillStyle = '#ff0000';
context.fillRect(0, 0, 256, 256);
context.fillStyle = '#00ff00';
context.fillRect(256, 0, 256, 256);
context.fillStyle = '#0000ff';
context.fillRect(0, 256, 256, 256);
context.fillStyle = '#ffff00';
context.fillRect(256, 256, 256, 256);

// Create texture from canvas
const texture = new THREE.CanvasTexture(canvas);

Video Textures​

// Create video element
const video = document.createElement('video');
video.src = 'path/to/video.mp4';
video.load();
video.play();

// Create video texture
const videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

const material = new THREE.MeshStandardMaterial({
  map: videoTexture,
});

Material Properties​

Common Properties​

const material = new THREE.MeshStandardMaterial({
  // Colors
  color: 0x00ff00,
  emissive: 0x000000,

  // Transparency
  transparent: true,
  opacity: 0.5,
  alphaTest: 0.5,

  // Sides
  side: THREE.FrontSide, // THREE.BackSide, THREE.DoubleSide

  // Depth
  depthTest: true,
  depthWrite: true,

  // Fog
  fog: true,

  // Wireframe
  wireframe: false,
  wireframeLinewidth: 1,

  // Flat shading
  flatShading: false,

  // Vertex colors
  vertexColors: false,
});

Blending​

material.blending = THREE.NoBlending;
material.blending = THREE.NormalBlending;
material.blending = THREE.AdditiveBlending;
material.blending = THREE.SubtractiveBlending;
material.blending = THREE.MultiplyBlending;
material.blending = THREE.CustomBlending;

// Custom blend equation
material.blendEquation = THREE.AddEquation;
material.blendSrc = THREE.SrcAlphaFactor;
material.blendDst = THREE.OneMinusSrcAlphaFactor;

Specialized Materials​

Line Materials​

// LineBasicMaterial
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0x0000ff,
  linewidth: 1,
});

// LineDashedMaterial
const dashedMaterial = new THREE.LineDashedMaterial({
  color: 0x0000ff,
  dashSize: 3,
  gapSize: 1,
});

Point Materials​

const pointMaterial = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 0.1,
  sizeAttenuation: true,
  map: pointTexture,
  transparent: true,
  alphaTest: 0.5,
});

Sprite Materials​

const spriteMaterial = new THREE.SpriteMaterial({
  map: spriteTexture,
  color: 0xffffff,
  transparent: true,
  alphaTest: 0.5,
});

const sprite = new THREE.Sprite(spriteMaterial);

Shader Materials​

ShaderMaterial​

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

RawShaderMaterial​

const rawShaderMaterial = new THREE.RawShaderMaterial({
  vertexShader: `
        precision mediump float;
        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        attribute vec3 position;
        
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
  fragmentShader: `
        precision mediump float;
        
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `,
});

Material Cloning​

// Clone material
const clonedMaterial = material.clone();

// Copy properties
const newMaterial = new THREE.MeshStandardMaterial();
newMaterial.copy(material);

// Share textures but different properties
const sharedTextureMaterial = new THREE.MeshStandardMaterial({
  map: material.map,
  color: 0x0000ff,
});

Material Updates​

// Update material properties
material.color.setHex(0xff0000);
material.opacity = 0.5;
material.needsUpdate = true;

// Update uniforms in shader materials
shaderMaterial.uniforms.time.value += 0.01;
shaderMaterial.uniforms.color.value.setHex(0x00ff00);

Performance Tips​

// Reuse materials
const sharedMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh1 = new THREE.Mesh(geometry1, sharedMaterial);
const mesh2 = new THREE.Mesh(geometry2, sharedMaterial);

// Dispose materials when not needed
material.dispose();
texture.dispose();

// Use texture atlases
const atlasTexture = textureLoader.load('atlas.png');
const material = new THREE.MeshStandardMaterial({ map: atlasTexture });