Design Atlas
한국어
◈ 3D · WebGL

Environment map

환경 맵

Lighting and reflecting an object using a texture of its surroundings — realistic reflections and lighting in one step.

Also known as: IBLImage-Based LightingPMREMGeneratorRoomEnvironment
···
js
import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0.6, 6);
const pmrem = new THREE.PMREMGenerator(renderer);
const envTex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
scene.environment = envTex;
scene.background = envTex;
scene.backgroundBlurriness = 0.35;
const group = new THREE.Group();
const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(1.05, 0.34, 180, 24),
  new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 1, roughness: 0.12 })
);
group.add(knot);
scene.add(group);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  group.rotation.y = t * 0.00028;
  group.rotation.x = Math.sin(t * 0.00018) * 0.25;
  renderer.render(scene, camera);
});

Drop an HDRI panorama into scene.environment and every PBR material reflects and is lit as if standing in that space (Image-Based Lighting). Since this site can’t load external images, it uses three.js’s RoomEnvironment addon — a Scene that procedurally builds a small virtual room — and bakes it into an environment texture on the fly with PMREMGenerator.

PMREMGenerator pre-convolves that scene at several blur levels (a Prefiltered Mipmapped Radiance Environment Map), so rougher materials automatically get blurrier reflections without recomputing anything per frame.

scene.environment drives reflections and lighting; put the same texture on scene.background to also use it as the visible backdrop. The demo places a fully smooth metal torus knot in this environment so you can watch the reflection flow across its surface.

When to use

When reflective materials — metal, glass — need to read as real. A genuine HDRI will look even more convincing when you can load one.