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

1. Angle: rotate the cube's texture.

   

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

3. Mode: view as box or flat image.

   

Local Development

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

1. Clone the repo.
2. Change directory to equirectangular-cubemap.

   cd equirectangular-cubemap

3. 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.
4. Run local server

   pnpm dev

Roadmap

• Handle HDR image with RGBELoader

Acknowledgement

Image source

• christmas_photo_studio_04 by Sergej Majboroda