Change skybox's up vector

Hello there!

I found a nice skybox online and it has its up vector set to (0., 1., 0.) just like what is usually done in ThreeJS if I understand correctly.
My problem is, in my scene, I decided the up vector to be (0., 0., 1.). Is there a quick and easy way of rotating the skybox to respect this?

I tried doing scene.up.set(new THREE.Vector3(0., 0., 1.)) and THREE.Object3D.DefaultUp.set(new THREE.Vector3(0., 0., 1.)) but it did not change the skybox orientation.

Thanks in advance!

Unfortunately, it’s currently not possible to change the orientation of a skybox. Meaning you have to do this offline before loading them and assigning to Scene.background. There is actually an issue about this topic at GitHub.

1 Like

Thanks for your answer!

Any pointers for how to achieve it offline?

My up vector being (0, 0, 1) I switched z and y images and I rotated by +90 degrees px and by -90 degrees nx, but that did not work. It might be obvious to you what I did wrong here :stuck_out_tongue:

The last time I have done this is some time ago. I remember that I’ve used an existing cube map (like https://github.com/mrdoob/three.js/tree/dev/examples/textures/cube/SwedishRoyalCastle) to adapt the respective convention (px,py,pz,nx,ny,nz) to the new env map.

There is a chunk of shader code that uses a world vector before indexing into some kind of a map. You could add a rotation matrix in there and multiply this vector before it’s indexed.

Thanks @dubois, I’ve done it by hand in the end. The final result of my scene is here: https://martinrenou.github.io/threejs-caustics

2 Likes

Another way, but has it’s own other issues that you’ll need to manage, is to create a skybox as a large cube, and then make it the parent of your scene. And then add all objects to the skybox object3d instead.

1 Like

My goodness, this result is so pretty!

1 Like

This would affect the background rendering, but not the reflections?