https://github.com/sokhuong-uon/equirectangular-cubemap
convert equirectangular image (360° panorama) to cubemap images
https://github.com/sokhuong-uon/equirectangular-cubemap
360 canvas cubemap drag-and-drop equirectangular gamedev hdri image-converter leva panorama react-three-drei react-three-fiber tailwindcss texture texture-generation threejs vite
Last synced: 7 months ago
JSON representation
convert equirectangular image (360° panorama) to cubemap images
- Host: GitHub
- URL: https://github.com/sokhuong-uon/equirectangular-cubemap
- Owner: sokhuong-uon
- License: mit
- Created: 2022-04-30T14:42:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T17:59:13.000Z (over 1 year ago)
- Last Synced: 2025-01-24T02:32:49.698Z (9 months ago)
- Topics: 360, canvas, cubemap, drag-and-drop, equirectangular, gamedev, hdri, image-converter, leva, panorama, react-three-drei, react-three-fiber, tailwindcss, texture, texture-generation, threejs, vite
- Language: TypeScript
- Homepage: https://equirectangular-cubemap.vercel.app/
- Size: 6.33 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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_.
```bash
cd equirectangular-cubemap
```
3. Install dependencies:
```bash
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
```bash
pnpm dev
```
## Roadmap
- Handle HDR image with RGBELoader
## Acknowledgement
### Image source
- [christmas_photo_studio_04](https://polyhaven.com/a/christmas_photo_studio_04) by [Sergej Majboroda](https://hdrmarket.com/)