Equirectangular to Cubemap

Take an Equirectangular or 360 Panorama image as input and return Cubemap images (6 images with a 1:1 aspect ratio).

Usage

Visit https://equirectangular-cubemap.vercel.app/ and you will be welcomed with the UI like the following image.

The main view is a 3D scene where you can see:

360 Panorama image around your view.
Visually, a cube with the same texture as the panorama.

At the top-right corner is the settings menu.

Settings Menu

Adjust the view and functionality.

Setting

Angle: rotate the cube's texture.
Dimension: resolution of the image.
- Preset values are 256, 512, 1024, 2048, and 4096 pixels.
- The higher the value the slower the rendering will be.
- 256 pixels will make the image blurry.
Mode: view as box or flat image.

Local Development

Note: Make sure you have Node.js installed on your machine.

Clone the repo.
Change directory to equirectangular-cubemap.
```
cd equirectangular-cubemap
```
Install dependencies:
```
pnpm i # you can use `yarn` or `npm install` or `bun install`
```
if you want to use pnpm but haven't enabled it yet, you can run corepack enable to enable yarn and pnpm.
Run local server
```
pnpm dev
```

Roadmap

Handle HDR image with RGBELoader

Acknowledgement

Image source

christmas_photo_studio_04 by Sergej Majboroda