'Is it possible to rotate a cube environment map 180 degrees around Y axis?

I'd like to rotate a cube map about Y axis by 180 degrees.

scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader()
                                      .setPath( '/path/to/my/docs/' )
                                      .load( [ 'posX.jpg', 'negX.jpg', 
                                               'posY.jpg', 'negY.jpg', 
                                               'posZ.jpg', 'negZ.jpg' ] );
// this doesn't work
scene.background.rotation.y = Math.PI;

How can I do that?

three.jsar.js


Solution 1:[1]

Pity but in Three.js I have no possibility to rotate my cube map using rotation parameter:

scene.background.rotation.y = Math.PI;

Solution

The simplest solution in my case (I want to rotate it around Y axis) is to rename 4 images that form the sides of the cube map to reorient that cube (skybox) 180 degrees.

We must remember that by default Three.js Camera looks towards -Z direction.

Look at these pictures. Left image depicts a default 6-image-placement to form a cube map. Right image represents 180-degrees-about-Y-axis reoriented cube.

enter image description here

Renaming process

So, for reorientation you just need to rename 4 source files. Here's a table showing you how to:

Default name Renamed
posX.jpg negX.jpg
negX.jpg posX.jpg
posZ.jpg negZ.jpg
negZ.jpg posZ.jpg

And after renaming process, rotate posY.jpg and negY.jpg images by 180 degrees.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions