360 degree images with three.js

A full wrap-around photographic background goes a long way, turning a few goofy primitives floating in space into an immersive virtual world.

This is just my Dancing Donut exercise of a few weeks back, with the addition of a photograph. Though, how the photograph is structured – and how it is added – is quite different from what you might experience adding a photograph to a flat web page.

Here’s the photograph itself:

Equirectangular photograph of a nice tropical location

That’s what they call an “equirectangular” photograph.

There’s a lot of tricky, technical ways to specify what an equirectangular image actually is, but the simplest way to describe it is to say that it will wrap perfectly around a sphere. And when I say perfectly, I mean that there will be no visible seams – there will be no visible bellybuttons at the poles – and that every pixel of the image will occupy exactly the same amount of area on the surface of the sphere as every other pixel.

If you Google “equirectangular photographs”, needless to say, you can see lots of them.

360 degree images

Just for kicks, let’s swap in some dank caves for that breezy tropical thing we’re using above:

A few keystrokes, and we’re in a whole new world. Though, I gotta admit – that particular photograph has some visible bellybuttons at the poles.

Anyway, three.js doesn’t support this sort of thing directly. In Blender, you can use one of these images as a background for a scene, and the objects in the scene will reflect the lights, darks, colours, textures, everything, of the image – making the objects in the scene staggeringly real-looking. So far, three.js doesn’t go nearly that far.

But I did find this one really simple hack, that works perfectly to create the full wrap-around background, that functions as a “set” for your “actors” to perform on:


Ha, ha, that’s too simple. So, it’s perfect. All he’s doing there, (and all I’m doing here) is creating a large sphere, that completely surrounds all the objects in the scene, and the camera, and the lights – mapping an equirectangular photograph onto that sphere – and then turning the sphere inside out so that the image that is mapped onto its surface is visible from the inside. How cool is that?

As he mentions, this works fine, as long as the camera doesn’t move around. If the camera goes outside the sphere, things get kinda wierd – it’s no longer like being inside an immersive virtual world – it’s kinda like peering into a freaky impossible snow-globe.

So, if you want to go places in your virtual world – this isn’t really the ticket. But we do see the concept pop up in another context that people refer to as “virtual reality” – the 360-degree movie. In a lot of cases, these are just a series of equirectangular frames – played in rapid succession the way flat frames are in a flat movie. The idea being, you can look anywhere around you, while the movie plays.

And in that case, it doesn’t matter that your camera is at the centre of a sphere – because the camera and the sphere move together with every frame. You can’t escape the sphere – in every frame, you’re at the centre of it.



Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @ 3dspace.com

One thought on “360 degree images with three.js”

Comments are closed.