Best approach HDR Image Based Lighting in Three.js

I think the following example demonstrates a good practice:

https://threejs.org/examples/webgl_loader_gltf

It uses a RGBE equirectangular environment map which is converted to the cubemap format via EquirectangularToCubeGenerator after loading. The final environment map for rendering is then generated with PMREMGenerator/PMREMCubeUVPacker. More information about both classes in this topic: Are there any guides for HDR setups for novices?

You then use a PBR material like MeshStandardMaterial or MeshPhysicalMaterial for your meshes.

6 Likes