Rotate the environment map as the camera rotates

Questions
1

Related to an earlier post I made about locking the rotation of a object that was the parent of some lights, I also wanted to apply the same camera rotation to the environment map.

(This was all to give the illusion that the model was rotating vs the camera)

I see version 162 just enabled that feature so I added support to my code. I also set the background and background rotation so it’s easier to tell if things are working correctly or not.

The updated fiddle from the previous question has the same code: Edit fiddle - JSFiddle - Code Playground

As you can see, the cameras and the scene background (if checkbox is enabled) are locked in place which is correct but I don’t think the same thing is happening for the environment.

After I set the rotation, I iterate over the scene and set the material envmap field so that the model picks up the changes.

Looking at the docs for THREE.Scene, I see:

However, it’s not possible to overwrite an existing texture assigned to MeshStandardMaterial.envMap.

which suggests that it’s not possible to do what I want.

Is that the case? Is there another way to do this?

Edit: added another, more simple fiddle that has no lights and no model - just a shiny sphere:

2

Seems to be working fine, but the line 73 should not follow the camera quaternion, instead use the inverse:

// NOTE Also consider the great technological advancement of not using `var`s and instead going for consts
const rotationInverse = new THREE.Euler().setFromQuaternion(camera.quaternion.clone().invert(), 'XZY');
scene.environmentRotation.copy(rotationInverse);

Is this the effect you’d be aiming for?

3

// NOTE Also consider the great technological advancement of not using vars and instead going

Noted :slight_smile:

What does using the inverse do ? AFAICT, it behaves the same, even though I’m sure there must be a difference.

To get the effect I want (the model rotating on a turntable as you drag the model), I think the background and environment should remain fixed as the mouse moves.

The background is easy to see when it’s enabled but the environment is much more subtle.

I think a more appropriate EXR file might help - one that was black on one side and white on the other - that might tell me if the environment was moving with the camera or not.

1 Like
4

var is globally scoped… so you if you forget to “var” a variable, it will stomp it globally and can lead to mysterious behavior in other files.
let is scoped to the closure it is defined in, reduces the chances of errors and opens some optimizations for the js engine.
Basically wherever you’re thinking of using var, you can probably just use “let” and not worry about it.