Create Velvet and Fabric Materials with Three.js Sheen

This article explains how to use the sheen properties in Three.js to create realistic fabric and velvet materials. You will learn which material class to use, how to configure key properties like sheen color and roughness, and how to apply these settings to your 3D models to achieve a soft, light-scattering textile effect.

Understanding Sheen in Three.js

In computer graphics, simulating cloth like velvet, satin, or microfiber can be challenging because these materials scatter light differently than hard, glossy surfaces. When light hits fabric, it catches on micro-fibers, creating a soft glow around the edges of the object (known as backscattering).

Three.js simulates this effect using the sheen properties available on the MeshPhysicalMaterial class. By adjusting the sheen intensity, color, and roughness, you can mimic how light grazes the surface of a fabric.

Step-by-Step Implementation

To create a velvet-like material, you must use MeshPhysicalMaterial rather than the standard MeshStandardMaterial, as the standard material does not support advanced rendering features like sheen.

1. Initialize the MeshPhysicalMaterial

Create a new instance of MeshPhysicalMaterial and define your base color. Dark, rich base colors like deep red, royal blue, or forest green work best for demonstrating the velvet effect.

import * as THREE from 'three';

const velvetMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x800020, // Deep burgundy base color
    roughness: 0.9,  // High roughness for a matte fabric base
    metalness: 0.0   // Fabric is non-metallic
});

2. Enable and Configure Sheen Properties

To add the fabric-like sheen, you need to configure three specific properties:

• sheen: Controls the intensity of the sheen layer. A value of 1.0 represents maximum intensity.
• sheenColor: The color of the light reflected off the micro-fibers. For realistic velvet, use a lighter shade of your base color or a pure white (0xffffff) for a dustier, softer look.
• sheenRoughness: Determines how much the sheen reflection scatters. A higher roughness (around 0.8 to 1.0) distributes the light softly across the surface, which is ideal for velvet. A lower roughness creates a tighter, shinier highlight more suitable for satin.

Add these properties to your material configuration:

velvetMaterial.sheen = 1.0;                           // Full sheen intensity
velvetMaterial.sheenColor = new THREE.Color(0xffb3d1); // Soft pink sheen for contrast
velvetMaterial.sheenRoughness = 0.85;                 // Soft, scattered reflection

3. Apply the Material to a Mesh

Apply the configured material to your geometry and add it to your Three.js scene:

const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const clothMesh = new THREE.Mesh(geometry, velvetMaterial);
scene.add(clothMesh);

Tips for Optimizing the Fabric Look

• Lighting is Crucial: Sheen is highly dependent on viewing angles and lighting. Ensure your scene has a mix of directional lights or an environment map (HDRI) so you can see the light catching the “fuzzy” edges of the geometry.
• Use Normal Maps: To make the fabric look even more realistic, apply a high-frequency normal map representing a weave pattern. This breaks up the flat surfaces and interacts beautifully with the sheen highlights.
• Avoid High Metalness: Fabric materials should almost always have metalness set to 0.0. High metalness will conflict with the sheen effect and make the object look metallic rather than organic.