It doesn't matter what you are working on right now, either videogames or 360° viewers, the so-called skyboxes are a necessary resource that isn't easy to find. What is easy to find though is regular images with the 2:1 aspect ratio (equirectangular) or panoramic pictures, and it exists the possibility to create the cubemap version of them with different tools.
1. Prepare a 360° image
In order to create our own 360° image viewer component for ReactJS, we will need an image that has the characteristics of a 360° panoramic image as we will create the six cube version of it later. This image needs to:
- Have an equirectangular projection.
2:1aspect ratio. This means that the width needs to be double the height (or the height needs to be half of the width, e.g. 2000px * 1000px is ideal for a great-looking 360 image).
In this article we'll use the following image that fulfills the mentioned requirements:
Remember that this is a pure example, the image isn't of high resolution so don't expect 4K quality. The higher the resolution of the images, the better it will look of course.
2. Convert panoramic picture to cubemap
In our example, the tool will generate 6 different images whose structure is the following one:
The generated tiles, in this case, are the following:
- Top (top.jpg):
- Right (right.jpg):
- Back (back.jpg):
- Left (left.jpg):
- Front (front.jpg):
- Bottom (bottom.jpg):
Happy coding ❤️!