# Cubic panorama for a sphere's texture

Hi
I’m trying to create a panorama with a sphere and these image for texture :

I have already succeed to do this with an equirectangular panorama.

I hope someone have an idea.

When using cube mapping for a panorama effect, you need six single images representing the sides of the cube. Check out the textures from the official repository to get an understanding for this format.

You can then load the textures with THREE.CubeTextureLoader like demonstrated in the following official example: https://threejs.org/examples/webgl_materials_envmaps

There are different ways to convert your current texture into a six single images. You can do this with a tool like Photoshop or via code. Check out how webgl_panorama_cube generates the textures on-the-fly from a single image stripe.

2 Likes

I’ll try to convert this image with code

I succeed to do this but I have to apply a quaternion on my cube … I apply it but the texture don’t match with the reality

As we can see, there is a shift with the pointcloud right behind.

To obtain this result, I made this change on the cube :

``````    var quaternion = new THREE.Quaternion(
7.6978864034e-02,
9.9674026275e-01,
2.4146059589e-02,
-2.6629351181e-04
);
cube.quaternion = quaternion;
``````

The position is good but the rotation don’t match… I don’t know how the quaternion work

Why do you have to do this?

Instead of assigning a new object, do this:

``````cube.quaternion.set(
7.6978864034e-02,
9.9674026275e-01,
2.4146059589e-02,
-2.6629351181e-04
);
``````

I have to do this for match an image of a scan with a pointcloud

I apply the quaternion like we suggeste to me and the rotation is worst

Do you think my values could be bad ?

Where do these values come from?

they come from a TXT file with all the positions and quaternion rotation avec each scan with the image relative

``````pose: 1560274075222100992 7.6978864034e-02 2.4146059589e-02 9.9674026275e-01 -2.6629351181e-04 -4.9628447083e-03 2.6040414544e-03 1.6255309652e-01
image: cubemap_1560274075222100992.jpg
pose: 1560274103222100992 -6.8659541590e-02 -1.0917096339e-01 -6.3371489680e-01 7.6274045237e-01 -2.6197680694e+00 3.8288942674e-01 1.0213282707e-01
image: cubemap_1560274103222100992.jpg
pose: 1560274117222100992 1.1500410050e-01 -5.6040426137e-02 7.9590626404e-01 5.9174888793e-01 -1.5765966253e+00 -2.0621160698e+00 1.2201322614e-01
image: cubemap_1560274117222100992.jpg
pose: 1560274129222100992 1.3529446345e-01 6.3883549481e-03 9.7037457190e-01 2.0006945617e-01 -9.9744708730e-01 -4.5702776963e+00 1.7615150350e-01
image: cubemap_1560274129222100992.jpg
pose: 1560274144222100992 1.4243026924e-01 4.5766781311e-02 9.5571482072e-01 -2.5343283449e-01 8.0062012904e-01 -2.4922189246e+00 9.2735101260e-02
image: cubemap_1560274144222100992.jpg
pose: 1560274157222100992 1.3463003297e-01 2.9704507936e-02 9.7433660172e-01 -1.7793420969e-01 3.0472627882e+00 -3.6019510805e+00 9.1723497302e-02
image: cubemap_1560274157222100992.jpg
pose: 1560274184222100992 -5.2839870311e-02 -1.3214525614e-01 -5.8072645794e-01 8.0156244949e-01 8.3141933848e-01 -2.4302361569e+00 9.4017072027e-02
image: cubemap_1560274184222100992.jpg
pose: 1560274192222100992 -8.6489961066e-02 -1.1084972448e-01 -6.9894148849e-01 7.0122223360e-01 4.6180465600e-01 2.7561086326e-01 8.2920835500e-02
image: cubemap_1560274192222100992.jpg
``````

There is 8 scans, Specifically each pose is timestamp, quaternion rotation, translation and image name

I use Potree, the Y et the Z are invert

I think that if the Y et the Z are invert, the Euler Rotation must be different ?