Search code examples
three.jsar.js

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?

Solution

  • 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.