Take an Equirectangular or 360 Panorama image as input and return Cubemap images (6 images with a 1:1 aspect ratio).
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.
![](https://private-user-images.githubusercontent.com/77433349/298788599-24f4339f-694c-402f-8cce-22bbb43a89cc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAwNDAzMTksIm5iZiI6MTcyMDA0MDAxOSwicGF0aCI6Ii83NzQzMzM0OS8yOTg3ODg1OTktMjRmNDMzOWYtNjk0Yy00MDJmLThjY2UtMjJiYmI0M2E4OWNjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAzVDIwNTMzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI3MTdlODA3YWI0Njk5YmZjZTE0OTI2M2FiNTFmNjYyNGQxMDZjNzE2MTg5Zjg0OWI5Nzg2ODVmMjVjZDc4NDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.aSAZpvBnTyY4P2pjLtmC--WTH0yLRmhpbeVVaVO2lOs)
Adjust the view and functionality.
-
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.
Note: Make sure you have Node.js installed on your machine.
- Clone the repo.
- Change directory to equirectangular-cubemap.
cd equirectangular-cubemap
- Install dependencies:
if you want to use
pnpm i # you can use `yarn` or `npm install` or `bun install`
pnpm
but haven't enabled it yet, you can runcorepack enable
to enable yarn and pnpm. - Run local server
pnpm dev
- Handle HDR image with RGBELoader