Best approach HDR Image Based Lighting in Three.js

Questions
,
1

What’s currently the best approach to IBL lighting in Three.js? I’ve read through the documentation and forum post on the topic but I’m finding it hard to tell which is currently the best approach. I’d prefer to work with gltf models and hdr textures for lighting, but happy to switch formats if it makes sense.

Thanks for your help!

Preston Chaplin

2 Likes
2

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
3

Thank you so much @Mugen87. That was exactly the direction I needed to get IBL working.

1 Like