Control Reflection Intensity with envMapIntensity in Three.js

In Three.js, achieving realistic 3D renders often depends on how materials interact with their surrounding environment. This article explains how to use the envMapIntensity property to control the brightness and intensity of ambient reflections on a material. You will learn which materials support this property, how to implement it in your code, and how to adjust it dynamically to achieve the perfect balance of environmental lighting in your 3D scenes.

What is envMapIntensity?

The envMapIntensity property is a scalar value that multiplies the effect of the environment map (envMap) on a physical or standard material. It allows you to brighten or dim the ambient reflections on a specific object’s surface without modifying the global scene lighting or the environment map texture itself.

• Default Value: 1.0 (The reflection matches the original brightness of the environment map).
• Value of 0.0: Ambient reflections are completely disabled, making the material ignore the environment map.
• Values Greater than 1.0: The reflections become progressively brighter and more pronounced.

Supported Materials

The envMapIntensity property is available on PBR (Physically-Based Rendering) materials in Three.js:

• MeshStandardMaterial
• MeshPhysicalMaterial

For reflections to be visible, your scene must have an active environment map assigned either to the individual material (material.envMap) or globally to the scene (scene.environment). Additionally, the material’s roughness should be relatively low, and its metalness relatively high to clearly display the reflections.

Implementing envMapIntensity in Code

You can set the reflection intensity directly during material instantiation or update it dynamically later.

Example: Setting Intensity on Creation

import * as THREE from 'three';

// Create a highly reflective, metallic material
const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 1.0,    // Fully metallic for clear reflections
    roughness: 0.1,    // Smooth surface
    envMapIntensity: 1.5 // Boosts the reflection brightness by 50%
});

Example: Updating Intensity Dynamically

If you need to change the reflection intensity in response to user input (such as a GUI slider) or changes in the game state, you can update the property directly on the material instance:

// Increase reflection intensity in the animation loop or an event handler
material.envMapIntensity = 2.5;

// If the material has already been rendered, you may need to flag it for an update
material.needsUpdate = true;

Why Use envMapIntensity?

Using envMapIntensity provides fine-grained artistic control over individual objects in a scene. Instead of changing the environment map for the entire scene—which would affect all objects—you can use this property to make specific assets stand out. For example, you can increase the intensity on a polished chrome car bumper to make it pop, while keeping a lower intensity on surrounding metallic objects to maintain visual balance.