Why does a GLB look black in Three.js?

Common causes include weak lighting, missing environment reflections, color-management assumptions, or materials that need a different inspection preset.

Should I start with shadows or lighting?

Start with readable lighting first. Add shadows only after the model, materials, and camera framing are already understandable.

Scene lighting

Three.js Lighting Presets

Preview practical light setups and copy the exact HemisphereLight, DirectionalLight, tone mapping, and exposure code.

Lighting preview unavailable

The studio rig values remain below. Apply them to a known-good material before tuning intensity for a production asset.

Copy the lighting setup

Use this as a starting point, then tune intensities after your real material and environment map are in place.

renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;

scene.background = new THREE.Color(0xf2f6fb);

const hemi = new THREE.HemisphereLight(
  0xffffff,
  0x263342,
  1.7
);
scene.add(hemi);

const key = new THREE.DirectionalLight(0xffffff, 2.8);
key.position.set(3, 4.5, 4);
scene.add(key);

const rim = new THREE.DirectionalLight(0x8ff7e8, 1.2);
rim.position.set(-4, 2.8, -3);
scene.add(rim);

What makes a model look better?

Most dull Three.js previews need color management, tone mapping, and balanced key, fill, and rim lights before they need complex post-processing.

FAQ

DirectionalLight works well for simple static viewers. For physically accurate product shots, add an environment map and tune material roughness.

Preset meanings

Use studio product for balanced previews, softbox neutral for inspection, dusk contrast for dark interfaces, and matte clay when shape matters more than material finish.

Pair lighting with model checks

If a GLB still looks wrong, inspect it in the GLB Viewer and read the GLTFLoader guide before changing every light value.