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 = ;var CubemapToEquirectangular = ;
Define a new instance of THREE.CubemapToEquirectangular.
// create renderer, scene, camera, etc.var renderer = ;var scene = ;var camera = /* ... */ ; // Create a managed CubemapToEquirectangularvar equiManaged = renderer true ; // or create an unmanaged CubemapToEquirectangularvar equiUnmanaged = 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;
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 = 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 scenecubeCameraposition;cubeCamera; // call this to convert the cubemap rendertarget to a panoramaequiUnmanaged;
Demo of Unmanaged mode: Demo
Changing output size
To export a different size, call setSize( width, height )
:
equi;
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