Offset (or rotate) the envMap

Questions
1

Hi,

I’ve created an envMap from an equirectangular EXR image (using the three.equirectangular-to-cubemap package from npm).

I can use it in my materials and it works, but the result is not what I want.

So I would like to rotate the envMap in order to displace the light sources and get a better result.

No matter what I tried, I cannot get this texture to change once imported in ThreeJS.

So far, I’ve tried:

  • texture.offset.x = 50;
  • texture.rotation = 50;
4 Likes
2

Why don’t you rotate both the object and the camera simultaneously? It’ll give the impression that it’s the environment that’s rotating.

Otherwise, you could use this online tool that lets you transform an equirectangular image to a cubemap with the exact rotation you want by dragging the image.

3

Oh I’ve been wanting to do this too. The online tool looks promising, but I think I need to be able to provide an exact rotation in degrees.

1 Like
4

@marquizzo So you mean that there is no way to simply move a texture inside ThreeJS?
How weird this is!
I need to do tiny adjustments constantly, so I don’t want to re-export my envMap each time to see the result.

1 Like
5

Well there is for most textures, via the offset/rotation properties you mention. But really that transforms UVs, and how that should affect an environment map is a harder question…

1 Like
6

Well, your statement has two parts:

  1. Yes, Three.js does have a way to rotate texture.maps.
  2. No, Three.js does not have a native way to rotate texture.envMaps.

They are two similar things that behave differently. Look at the texture constants page you’ll see UVMapping is for standard textures that get applied to the faces of your mesh (you can rotate and offset these). I believe envMaps use EquirectangularReflectionMapping, which doesn’t have built-in rotation attributes that you can modify out of the box.

If you really must get envMap rotations, you’ll have to create your own custom shaders with the ability to rotate the way they’re mapped. I was able to follow this article to create my own rotating CubeMap, maybe you could use it to make your own EnvMap. There’s a section 2/3rds down titled “GLSL Language” with the code that will point you in the right direction.

1 Like
7

Mmh… I see. I’m not ready at all to dig into GLSL, so I’ll use the simple “rotate the whole scene” technique.

But my camera has a lookAt on a THREE.Vector3. I’ve tried to add it to the group that I rotate, but it doesn’t seem to work.

And apparently, according to the docs:
This method does not support objects with rotated and/or translated parent(s).

8

+1 for ability to rotate envMap, including HDR/PMREM.

7 Likes
9

if you have an equirectangular
https://jaxry.github.io/panorama-to-cubemap/