Need help with scene.environment + physicallyCorrectLights. How to get texture lighting on meshes?

Hi there!
I need to recreate this blender scene in three-js but I’m having a difficult time. As you can see in Blender there is a hdr texture for the “world” selected and it influences the way the objects in the scene are lit up or influences their materials. I am not super experienced in these concepts and I have been playing around with several settings. Can someone please explain me if I should use

  • renderer.physicallyCorrectLights = true
  • renderer.outputEncoding = sRGBEncoding ?
  • toneMapping = ACESFilmicToneMapping ?

I am using this method to create the scene background + texture:
const setHdrBackground = (source: string | undefined): void => {
const loader = new RGBELoader()
loader.load(source, (texture) => {
texture.mapping = EquirectangularReflectionMapping
texture.encoding = sRGBEncoding;
scene.background = texture
scene.environment = texture
})
}

This is the blender scene (how it is supposed to look)

And this is what I have now in three-js with the before mentioned settings

My hope is that someone can guess what is going wrong and point me in the right direction.
Thank you!!

Ok I can already answer my own question.
I simply had to use MeshStandardMaterial instead of the LambertMaterial. Then - since it is a physics based material - the scene environment immmediately took effect :slight_smile:

Hopefully this will help someone!

2 Likes