Monday, 6 January 2014

Photo spheres with three.js

Ever wanted to create those fancy-looking 360° panoramas? If you mix a mobile phone with three.js and some knowledge about (map) projections, it's quite easy.

I love travelling, especially to mountainous areas of our planet. Taking photos of vast landscapes can be challenging. This drew my interest in spherical panoramas, photographs that captures everything around you - up, down and all around - 360 x 180 degrees.

Google calls it a photo sphere, and if you own a mobile phone with Android 4.2 or higher, you can easily create one yourself. I captured this winter scene with my phone a few days ago. But what if you want to get rid of the Google wrapping and show your panorama in your own viewer? Let's try to do it with three.js.

You simply create a mesh of a geometric sphere and a material containing your image as a texture.

This will create a christmas ball effect your photo. Next we need to place the camera inside the sphere. You won't see much unless you invert the mesh "inside-out" by setting: sphere.scale.x = -1;I'm using the orbit controls to rotate the camera and allow the user to look around inside the sphere.

Hi! I can't seem to get the github download to run. I'm pretty new to HTML5, but I come from a C# background and I am just beginning to understand how js hooks into HTML5 stuff. My steps were as follows:1. Downloaded the github zip.2. Opened index.html in Chrome (just a black screen)3. Opened gaustatoppen.html in Chome with same black screen result.

There's probably some super simple step I'm missing just because of my own ignorance with these systems. Any help you can offer is very much appreciated, and I'm a great researcher so if you just want to point me in the right direction that's perfectly fine too!

As and experiment, I just saved your fullscreen photosphere page and found it also gave me a black screen. Maybe these things cannot be run locally? I'm going to throw this up on a server and find out.

Hi Bjørn,I would like to kindly ask you for advice / code modification. On a small project for friends of the theater (http://indie2014foto.cebreus.eu/) have to displaying photos by Colorbox. I need your great feature to include in the Colorbox. Classic photo identification and a spherical can be done simply on the side of PHP by adding the required class.

Thanks for sharing this. I'm trying to build a panoramic virtual tour and need to be able to create clickable areas within a panorama which would take me to a hyperlink.

Could you please tell me what is a good way to getting around that?

I'm guessing we'd use Rays and would need to create a plane for marking the selectable area and connect the plane transform to the sphere transform. But I'm really new to Threejs and would really appreciate your help.