Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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 );


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


  • 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


MIT licensed

Copyright (C) 2016 Jaume Sanchez Elias,


Export an equirectangular panorama image from a three.js scene







No packages published