Export an equirectangular panorama image from a three.js scene
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 11 commits behind spite:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
about
build
examples
src
README.md
package.json

README.md

THREE.CubemapToEquirectangular

Helper to extract an equirectangular panorama PNG from any three.js scene.

Here's a demo with some cubes: Demo

How to use

Include script after THREE is included

<script src="CubemapToEquirectangular.js"></script>

or use npm to install it

npm i three.cubemap-to-equirectangular

and include it in your code with (remember to require three.js)

var THREE = require('three');
var CubemapToEquirectangular = require('three.cubemap-to-equirectangular');

Define a new instance of THREE.CubemapToEquirectangular.

// create renderer, scene, camera, etc.
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.Camera( /* ... */ );

// Create a managed CubemapToEquirectangular
var equiManaged = new CubemapToEquirectangular( renderer, true );

// or create an unmanaged CubemapToEquirectangular
var equiUnmanaged = new CubemapToEquirectangular( renderer, false );

Managed CubemapToEquirectangular

With Managed mode, the THREE.CubeCamera creation, update, render, etc. is all taken care of. You only have to call:

equiManaged.update( camera, scene );

at any point in your code that you want to extract a panorama. The cube map created will be 2048x2048 and the exported panorama will be 4096x2048. Note: The cubemap can easily be 4096x4096, but that seems to work on most mobiles, too

Demo of Managed mode: Demo

Unmanaged CubemapToEquirectangular

If you want to use a different CubeMap camera, or do something custom with the render, you will have to set the Unmanaged mode.

You will have to create and manage your THREE.CubeCamera:

var cubeCamera = new THREE.CubeCamera( .1, 1000, 4096 );

and manage all your scene update and rendering. When you want to export a panorama, call:

// this is where the developer updates the scene and creates a cubemap of the scene
cubeCamera.position.copy( camera.position );
cubeCamera.updateCubeMap( renderer, scene );

// call this to convert the cubemap rendertarget to a panorama
equiUnmanaged.convert( cubeCamera );

Demo of Unmanaged mode: Demo

Changing output size

To export a different size, call setSize( width, height ):

equi.setSize( 2048, 1024 );

Notes

Built using ES6 template strings. Needs canvas.toBlob, polyfill in the examples folder

TODO

  • Fix for Android (if it's a relevant use case) (seems to work with 2048x2048)
  • Check for mobile (if it's a relevant use case)
  • Add importance sampling (improves quality of output)
  • Handle postprocessing
  • Handle Safari not supporting download attribute
  • Let users have more control over file name, callbacks, progress

License

MIT licensed

Copyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com