Apply Roughness Map to MeshStandardMaterial in Three.js

This article explains how to simulate realistic, varying surface reflections on a 3D object in Three.js by applying a roughness map to a MeshStandardMaterial. You will learn how to load a grayscale texture, assign it to the material’s roughness property, and configure the material parameters to achieve realistic light scattering.

To create realistic surfaces in Three.js, a uniform shininess is often insufficient. A roughness map is a grayscale texture where black areas (value of 0.0) represent perfectly smooth, highly reflective surfaces, and white areas (value of 1.0) represent rough, matte surfaces. By mapping these values across a 3D mesh, you can simulate realistic wear, scratches, fingerprints, or varied material compositions.

Step 1: Load the Roughness Texture

First, use the THREE.TextureLoader to load your grayscale roughness map image.

import * as THREE from 'three';

// Initialize the texture loader
const textureLoader = new THREE.TextureLoader();

// Load the roughness map texture
const roughnessTexture = textureLoader.load('path/to/roughness-map.png');

Step 2: Configure Texture Color Space

For data textures like roughness, metalness, or normal maps, it is important to ensure Three.js does not apply sRGB color correction, as these maps contain mathematical data rather than visual colors. In modern Three.js, ensure the texture’s color space is set correctly:

roughnessTexture.colorSpace = THREE.NoColorSpace;

Step 3: Create and Apply the MeshStandardMaterial

Instantiate a MeshStandardMaterial and assign your loaded texture to the roughnessMap property.

const material = new THREE.MeshStandardMaterial({
    color: 0x3f51b5,          // Base color of the mesh
    roughness: 1.0,           // Multiplier for the roughness map
    metalness: 0.8,           // Works well with roughness for metallic reflections
    roughnessMap: roughnessTexture
});

Understanding the Roughness Multiplier

The roughness property of the material acts as a multiplier when a roughnessMap is present. * If roughness is set to 1.0 (default), the values from the roughness map are applied at their original scale. * If roughness is set to 0.5, the roughness values across the entire texture are halved, making the overall surface twice as shiny while maintaining the relative variation defined by the map.

Step 4: Apply to a Mesh

Finally, combine your geometry and the configured material into a mesh and add it to your scene.

const geometry = new THREE.SphereGeometry(1, 64, 64);
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

For the roughness map to be visible, ensure your scene has adequate lighting. A combination of a THREE.AmbientLight for base visibility and a THREE.DirectionalLight or THREE.PointLight will create the highlights needed to showcase the varying reflections.