scene.environmentRotation with unexpected behaviour

[DIeHarke]

Description

I have a current problem where I set the orientation of the environment map with the camera orientation. In doing so, I noticed an unexpected behaviour.

The specified rotation seems to have a different effect than if this rotation is applied to nodes in the scene.

I have created an example of this in Code Sandbox. When changing the camera with the arcball, the light point on the sphere should not move. However, this is only the case when rotating around the green axis. If you add the StudioEnvironment, which is used for the Envmap, as a node in the scene, it works without any problems. So applying the rotation does not have the same effect, which I would think is due to a bug or unclear documentation.

Reproduction steps

1. Open Code Sandbox
2. Use arcball to change camera
3. light spot should stay centered for any camera orientation, but does not currently
4. add StudioEnvironment to scene (and remove sphere) to see that this node is correctly following the camera orientation

Code

// this code is used to align the environment map orientation with the camera orientation
const environmentRotationMatrix = new Matrix4().lookAt(
    camera.position,
    camera.position.clone().negate(),
    camera.up
);
scene.environmentRotation.setFromRotationMatrix(environmentRotationMatrix);

Live example

• https://codesandbox.io/p/sandbox/three-js-forked-9ftdcv

Screenshots

No response

Version

175

Device

No response

Browser

No response

OS

No response

[Mugen87]

The expected behavior is that the environment map rotation matches to the background rotation of the scene. So when both are rotated with the same value, the reflections are in sync. You can test this with webgl_materials_envmaps.

The policy for the background rotation is defined in #27758 (comment).

I'm not sure what value you have to apply so the reflections are in sync with your studioEnvironment transformation.

[DIeHarke]

@Mugen87 thanks for the answer. I get that point that scene.environmentRotation and scene.backgroundRotation should be in sync. The problem I was referring to was on how to synchronize the rotation of the envMap with the orientation of of nodes in the scene graph (eg. Camera).

I had a quick look in the referenced issue. Could my described problem maybe be related to using different types of coordinate systems (left vs right handed)? This could also explain why it seem to work for rotation certain axes...

Adding the studioEnvironment was just a purely for debugging of that artificial code sandbox snippet. I should just show that here the synchronized orientation with the camera is working.

[Mugen87]

I came up with some code that should do the trick: https://jsfiddle.net/wxgfLm0t/

 // use inverse/opposite rotation of the camera

  q.copy( camera.quaternion ).invert();

 scene.environmentRotation.setFromQuaternion( q );
 
 // accommodate left-handed frame

 scene.environmentRotation.x *= -1;
 scene.environmentRotation.y *= -1;
 scene.environmentRotation.z *= -1;

[DIeHarke]

Awesome thanks @Mugen87 for helping me out with a solution here!