Can Background Panorama be separate from CubeTexture

Questions
, ,
1

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.

1
1773×654 142 KB
2
2773×654 549 KB
3
3761×622 591 KB

2

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.

3

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?

environment code
environment code1281×810 567 KB

4

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
5

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.