Issue rotating HDR Lighting

Questions
, , ,
1

My main objective was to rotate the environment but keeping the gltf or object form rotating.
I managed to do that using backgroundRotation from the scene.backgroundRotation but on testing I noticed that the lighting was not rotating with the background.
I wonder how I should do that.


  loadEnvironment(url, check) {
    this.hdrProgress = 0;
    new RGBELoader().load(
      url,
      (texture) => {
        const gen = new THREE.PMREMGenerator(this.renderer);
        this.envMap = gen.fromEquirectangular(texture).texture;
        this.scene.environment = this.envMap;
        this.scene.background = this.envMap;
        console.log(this.envMap);
        texture.dispose();
        gen.dispose();
      },
      (xhr) => {
        this.hdrProgress = (xhr.loaded / xhr.total) * 100;
      },
    );
    this.progressLoader(check);
  }


rotateBackground(angle) {
    const radians = parseFloat(angle) * (Math.PI / 180);
    this.scene.backgroundRotation = new THREE.Euler(0, radians, 0);
  }

I’ll attach the pictures

Before rotation
image
image1911×905 96.7 KB

After rotation

image
image1916×901 81.1 KB

Ideal Usecase

image
image1916×902 78.1 KB

In the ideal usecase image you can see there is no glare at the object when it is facing the wall
and in the before rotation image when camera faces the window there is glare at the object and that is fine. Issue => Suppose camera is facing the window and there is glare on the object now I use the rotateBackground function to rotate -180deg that would result in the After rotation image. and see there is glare on the object even when it is facing the wall.

I know my explanation is kinnda messy, please bear with me and feel free to ask question for clarification.
Any help is appreciated.

2

Are you looking for .environmentRotation? You’d need to update background and environment simultaneously

1 Like
3

I forgot to mention that.

I did try to do rotate simultaneously but the issue persists.

4

Are you by chance setting any materials .envMap with the background / environment image? If so you’d need to rotate any material.envMap simultaneously also…

Can you provide a minimal code setup that demonstrates the issue? A single sphere and a loaded hdr would do…

5

Here’s a demo of environmentRotation working as expected…

If this doesn’t work in your setup it’s a guess that you’re attaching the loaded environment into the object materials .envMap which would need to be updated per material with envMapRotation iirc…

1 Like
6

Yes I am using the envMap


const gen = new THREE.PMREMGenerator(this.renderer);
        this.envMap = gen.fromEquirectangular(texture).texture;
        this.scene.environment = this.envMap;
        this.scene.background = this.envMap;

Inside the animate() I tried to rotate it using this but no luck:

if (this.envMap) { // Ensure this.envMap is defined
      const rotationMatrix = new THREE.Matrix3().set(
        Math.cos(0.01), 0, Math.sin(0.01),
        0, 1, 0,
        -Math.sin(0.01), 0, Math.cos(0.01)
      ); // Rotate by a small angle
      this.envMap.matrix.multiply(rotationMatrix);
    }

I’m will shortly attach a CodePen to demonstrate the issue

7

While I was writing the code pen another thought crossed my mind.

Instead of rotating the environment and background I can rotate the camera around the object and the object faces the camera this will suffice too.

Now I am able to rotate the camera while retaining the objects relative angle to it. I am testing it right now. If any issues popup i’ll add here.

Thanks Lawrence