Design Atlas
한국어
◧ Film & photo

Three-point lighting

삼점 조명

The classic three-light rig — key, fill, and back — that models a subject in three dimensions and separates it from the background.

Also known as: Key/fill/back lightKey-fill-rim setup
···
html
<div class="hud">
  <span class="tag key" id="tagKey">KEY</span>
  <span class="tag fill" id="tagFill">FILL</span>
  <span class="tag back" id="tagBack">BACK</span>
</div>
css
.hud{position:absolute;left:5%;top:5%;display:flex;gap:6px}
.tag{font:800 10px ui-monospace,monospace;padding:3px 8px;border-radius:20px;color:#fff;
  background:rgba(255,255,255,.08);opacity:.25;transition:opacity .4s,background .4s;letter-spacing:.04em}
.tag.on{opacity:1}
.tag.key.on{background:#c98a2c}
.tag.fill.on{background:#3d5fbf}
.tag.back.on{background:#6a6a8a}
js
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a10);

const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 0.3, 4.6);
camera.lookAt(0, 0.1, 0);

const backdrop = new THREE.Mesh(
  new THREE.PlaneGeometry(8, 5),
  new THREE.MeshStandardMaterial({ color: 0x111118, roughness: 1 })
);
backdrop.position.set(0, 0.5, -2);
scene.add(backdrop);

const head = new THREE.Mesh(
  new THREE.SphereGeometry(1, 48, 48),
  new THREE.MeshStandardMaterial({ color: 0xd9b98c, roughness: 0.6 })
);
scene.add(head);
const base = new THREE.Mesh(
  new THREE.CylinderGeometry(0.7, 0.9, 0.7, 32),
  new THREE.MeshStandardMaterial({ color: 0x2c2f3d, roughness: 0.7 })
);
base.position.set(0, -1.25, 0);
scene.add(base);

scene.add(new THREE.AmbientLight(0x404050, 0.25));
const key = new THREE.DirectionalLight(0xffcf8f, 0);
key.position.set(3, 3, 3);
scene.add(key);
const fill = new THREE.DirectionalLight(0x8fb3ff, 0);
fill.position.set(-3.5, 1, 2.5);
scene.add(fill);
const back = new THREE.DirectionalLight(0xe4e4ff, 0);
back.position.set(0, 3, -3.5);
scene.add(back);

const tagKey = document.getElementById('tagKey');
const tagFill = document.getElementById('tagFill');
const tagBack = document.getElementById('tagBack');

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();

renderer.setAnimationLoop((t) => {
  const phase = Math.floor((t / 1600) % 4);
  const wantKey = phase !== 3;
  const wantFill = phase === 1 || phase === 2;
  const wantBack = phase === 2;
  key.intensity = THREE.MathUtils.lerp(key.intensity, wantKey ? 2.4 : 0, 0.12);
  fill.intensity = THREE.MathUtils.lerp(fill.intensity, wantFill ? 0.9 : 0, 0.12);
  back.intensity = THREE.MathUtils.lerp(back.intensity, wantBack ? 1.6 : 0, 0.12);
  tagKey.classList.toggle('on', wantKey);
  tagFill.classList.toggle('on', wantFill);
  tagBack.classList.toggle('on', wantBack);
  head.rotation.y = t * 0.0002;
  renderer.render(scene, camera);
});

The key light is the brightest, primary source — usually placed about 45 degrees up and to one side of the subject. Used alone it leaves a hard shadow on the opposite side, so a weaker fill light sits on that far side to lift the shadow just enough to keep detail visible.

The back light (or rim light) sits behind and above the subject, tracing a thin bright edge along hair or shoulders. That edge is what visually separates the subject from the background — especially important when their colors are close.

The demo switches the lights on in order: key alone leaves one side deep in shadow; adding fill lightens that shadow; adding the back light lifts a rim of light off the subject, separating it from the backdrop. Tuning the ratio between key and fill (commonly 2:1 to 4:1) is the core decision in lighting design.

When to use

Use it as the default starting point for interviews, product shots, and portraits. Adjust the ratios between the three and it stretches into low-key or high-key setups.