How to make Sky Boxes from A-Frame Scenes

Bookmarklet to produce equirectangular images suitable for sky spheres from A-Frame scenes.

This has now been rewritten with a new faster method based on cubemaps. The orignal post has been kept for posterity.

UPDATE 2: This can now be done entirely within AFrame


I am working on a page to show off my A-Frame scenes and I want to give the users an immersive preview without loading up the whole scene.

I can do this by loading up a spherical image into an <a-sky> or perhaps set it as then environment in the Samsung VR Browser as detailed here.

But producing these images usually requires special render rigs in Maya or Blender so are hard to reproduce the exact look from the web.

This script when run on a web page with a A-Frame scene will render out the scene at many (64800) different angles stitch them together into a single image. It’s a bit brute force but it works pretty well.

The bookmarklet

Create a new bookmark with the following url:


The method

I couldn’t find a way to render a full 360 degree view of a scene in one go so I decided to make my own. This is probably not the optimal way to do it.

This method rotates the camera by a small degree and takes a tiny render. It renders many vertical stripes then it then stitches them all together in giant canvas and opens the resulting image in a new tab for saving.

It takes a couple of minutes on my netbook but gives a pretty good result.

Captured image using the bookmarklet
var width = window.renderTileWidth || 10;
var dT = window.renderTileAngle || 1;
var sceneEl = document.querySelector('a-scene');
var scene = sceneEl.object3D;
var camera = new THREE.PerspectiveCamera( dT, 1, 0.1, 10000 );
var renderer = new THREE.WebGLRenderer();
var CONV = Math.PI/180;
if (window.renderOrigin) {
} else {
renderer.setSize( width, width );
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
for (var i=0; i<360; i+=dT) {
for (var j=0; j<180; j+=dT) {
camera.rotation.set((-j+90)*CONV,-i*CONV,0 );
renderer.render( scene, camera );
ctx.drawImage(renderer.domElement, width*i/dT, width*j/dT);

Using the bookmarklet

The bookmarklet will render from the scene’s current camera’s position by default.

Once it is done it will open the result in a new window.

It will render 360x180 10x10 squares this can be tweaked to increase to decrease quality, this very low quality example gives a good idea of how the bookmarklet works.

renderTileAngle of 30 with a renderTileWidth of 100

One more from:


It is a brute force method so can take a while to run. It tends to breakdown at the top and bottom of the scene where the greatest stretch happens. If you have a better/faster method please comment!!!




Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ada Rose Cannon

Ada Rose Cannon

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

More from Medium

JavaScript Coding Tutorial — Part 8 — Polygons and Volcanos!

We can add a linear gradient fill to add some hot lava and fire to our volcano.

How to Create and Manipulate DOM Nodes in Vanilla JS

Optimising images for High DPI displays

Optimising Images for High DPI displays hero banner

The Browser Console and What It Can Do