Can Background Panorama be separate from CubeTexture

Hello everybody, first time posting and new to Three.js. Sorry about the awkardly worded topic. I have a model with reflective material that looks good with a HDRIcubetexture, however, I would like for the background not be the HDRI image, and prefer to have a custom-made gradient panorama.

In other words, I would like to take advantage of HDRI lighting effect but with a different cubemap image for presentation. Is this possible to do in Three.js? The reason I prefer not to use gradient image as cubemap is because it diminishes metallic surface quality. Please refer to attached test images from Marmoset Toolbag:
Img 1: lighting good, hdri image background undesirable
Img 2: lighting good, ambience background *this is what I would like to achieve
Img 3: custom gradient background, poor lighting on metallic surface

Thank you in advance for any help or suggestion.

Have you tried to assign the gradient background map to Scene.background and the HDR texture to Scene.environment? Background and environment maps for meshes don’t have to be coupled.

Hi Mugen87 - thanks for taking the time. It’s cool background and environment map can be de-coupled! I succeed at placing a static image in the background, but what I was hoping for is to swap out a background cubemap.

I am using React-Three-Fiber in this implementation. Please see attached screenshot. I use the useEffect Hook to enable dynamic tonemapping from GUI pass in as props. Once the cubemap is applied, env map and background do not seem to de-couple. I tried out several approaches using textureloader, but nothing works. However, the static image applies nicely. What am I missing?

Well, you have to ensure to not assign the same cube texture to Scene.environment. It seems you are doing this in your code right now.

1 Like

oh I should have explained better. I tried using a CubeTextureLoader to load a different background image to Scene.background, and HDRIcubeTextureLoader for Scene.environment. The result was HDRIcubeTextureLoader affects both the environment lighting as well as the background. It did not de-couple.