https://github.com/spite/three.equirectangulartocubemap
Convert an equirectangular panorama into a cubemap texture
https://github.com/spite/three.equirectangulartocubemap
Last synced: 8 months ago
JSON representation
Convert an equirectangular panorama into a cubemap texture
- Host: GitHub
- URL: https://github.com/spite/three.equirectangulartocubemap
- Owner: spite
- Created: 2016-09-22T19:29:00.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-09T11:30:19.000Z (over 9 years ago)
- Last Synced: 2025-01-09T21:30:23.062Z (over 1 year ago)
- Language: JavaScript
- Size: 1.85 MB
- Stars: 60
- Watchers: 7
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# THREE.EquirectangularToCubemap
Convert an equirectangular panorama into a cubemap texture
Here's a demo loading an equirectangular panorama and converting it to two different cubemaps: [Demo](http://clicktorelease.com/tools/EquirectangularToCubemap/index.html)
#### How to use ####
Include script after THREE is included
```js
```
or use npm to install it
```
npm i three.equirectangular-to-cubemap
```
and include it in your code (don't forget to require three.js)
```js
var THREE = require( 'three' );
var EquirectangularToCubemap = require( 'three.equirectangular-to-cubemap' );
```
Define a new instance of THREE.EquirectangularToCubemap and call .convert
```js
// create your renderer, scene, etc.
renderer = new THREE.WebGLRenderer();
// load the image you want to convert
var loader = new THREE.TextureLoader();
loader.load( 'equirectangular-panorama.jpg', function( res ) {
// once it's loaded, create the helper and use it
var equiToCube = new EquirectangularToCubemap( renderer );
// convert the image, in this case it's been used as environment map
mesh = new THREE.Mesh(
new THREE.TorusKnotGeometry( 10, 3, 100, 32 ),
new THREE.MeshBasicMaterial( { envMap: equiToCube.convert( res, 1024 ) } )
);
scene.add( mesh );
} );
```
So ```.convert()``` accepts a texture as ``source`` and a number (power of two) as size (with and height) of the cube map.
```THREE.EquirectangularToCubemap``` automatically checks for the maximum possible size for cube maps, and clamps the size provided (there seems to be a bug with Android, at least in Nexus 5 Android 6)
#### License ####
MIT licensed
Copyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com