Light a product configurator with an environment map, not point lights

A product in a configurator lives or dies on how it is lit. The default instinct, drop in a couple of PointLights and a DirectionalLight, makes metal look like grey plastic and glass look like nothing. For PBR materials the answer is an environment map, and it is less work than the lights you were about to add.

Why point lights fall flat

MeshStandardMaterial and MeshPhysicalMaterial are physically based. They are built to reflect their surroundings. Point lights give them specular highlights but nothing to reflect, so metal has no sense of a room around it and anything glossy looks dull. You can stack more lights trying to fake it, and it still looks staged.

An environment map lights everything at once

Set scene.environment and every PBR material in the scene reflects it:

import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'

const pmrem = new THREE.PMREMGenerator(renderer)
scene.environment = pmrem.fromScene(new RoomEnvironment()).texture

RoomEnvironment is a neutral studio built in code, so you get believable reflections and soft lighting with no HDR file to download. Metal looks like metal, glass picks up highlights, and you did it in three lines.

When you want a specific look, load an HDR

For a branded or specific environment, load an equirectangular HDR and run it through the same PMREMGenerator:

new RGBELoader().load('/env/studio.hdr', (hdr) => {
  scene.environment = pmrem.fromEquirectangular(hdr).texture
  hdr.dispose()
})

Keep the HDR small (1k or 2k is plenty for lighting, since it is reflections not a backdrop) so you are not adding megabytes for something the user never looks at directly.

The combination that works

Environment map for the ambient lighting and reflections, plus one soft directional light for a readable shadow and a sense of direction. That is the whole rig for most products. Fewer lights, better result. The pergola at pergola3d.grodev.pl is lit this way, which is why the aluminium reads as aluminium.

I am Dominik Groński / GroDev, a studio in Poznan, Poland building custom 3D configurators and Laravel back-ends for manufacturers.