Design Atlas
한국어
⬢ 3D modeling & rendering

HDRI lighting

HDRI 라이팅

Lighting and reflecting an entire object with a single high-dynamic-range panorama of a real (or procedural) space.

Also known as: Image-based lightingIBL환경광
···
html
<span class="hdri-cap">one HDRI · lighting + reflections, no lights placed</span>
css
.hdri-cap{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:clamp(9px,2.4vmin,12px);color:#f1f0ecdd}
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(42, 1, 0.1, 100);
camera.position.set(0, 0.4, 5.2);
const pmrem = new THREE.PMREMGenerator(renderer);
const envTex = pmrem.fromScene(new RoomEnvironment(), 0.035).texture;
scene.environment = envTex;
scene.background = envTex;
scene.backgroundBlurriness = 0.5;

const mesh = new THREE.Mesh(
  new THREE.CapsuleGeometry(0.62, 1.15, 12, 32),
  new THREE.MeshPhysicalMaterial({ color: 0xe6413a, roughness: 0.25, metalness: 0.0, clearcoat: 1, clearcoatRoughness: 0.15 })
);
scene.add(mesh);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  mesh.rotation.y = t * 0.00032;
  mesh.rotation.x = Math.sin(t * 0.00018) * 0.15;
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

Getting a convincing studio render usually means hand-placing three lights — key, fill, rim. HDRI lighting replaces that with a single panorama photo of the surrounding space (shot in HDR, so even very bright highlights aren’t clipped), letting the object receive light from every direction as if it were genuinely sitting inside that space.

The power move is that “lighting” and “reflection” come from the same data at once: a smooth surface reflects that panorama directly, while the panorama’s own brightness distribution decides how bright each face of the object gets lit. Instead of placing three lights one by one, swapping in a different HDRI — studio, outdoors, sunset — changes the entire mood in one step.

Blender, C4D, and Maya all support HDRI files directly through an “environment texture” or IBL node. Since this site can’t load external images, it uses three.js’s RoomEnvironment addon to procedurally build a small virtual room and bake it on the spot (the environment-map entry covers that baking step itself in more depth).

When to use

Reach for it when you need fast, realistic studio-style lighting — product mockups, previewing metal or glass materials.