Virtual Tour Online Embedder


There are plenty of ways to use your equirectangular panoramas online. The main downside of the programs offering this functionality is the fiddly time consuming process you have to go through to publish the panoramas online, whether they have been saved as an .swf or as an html package. If you want compatibility you’d go with html and get a folder with half a dozen files that you have to upload to the website. If you want use these in a blog post then you would have to use ftp to upload the files. I wanted a simple to use tool that would take care of the embedding the panoramas and minimise the work involved. Here is how it goes:

  1. Create your 360 panorama (using photoshop, hugin, pano tools)
  2. Upload the jpeg of the panorama to http://orb.photo/embed_panoramas/
  3. Tweak the size and the embed options
  4. Copy the code and paste it into the html/text of your website or blog.

Thats it, it does the fiddly work for you. You can embed photospheres right from the google nexus phone if you wanted and, the plugin has a “Page background” option where the panorama fills the complete screen and is floating behind any content you’ve got. (Make sure that you don’t have non-transparent elements above z-index:-1 covering the panorama if nothing shows up.) The panorama embed code looks like this:

<iframe src="http://orb.photo/embedded_player.php?view=2015021387f3d2139222ad5ddcd26a6c69c4cd38" width="900" height="600" frameborder="0" scrolling="no">Please enable iframes to view content.</iframe>

The tool is available on the orb.photo website   The script uses webgl and javascript to place the equirectangular texture over a sphere which is then animated for the immersive experience. Javascript implementation ensures the panoramas will work on the mobile devices.

Leave a Reply

Your email address will not be published. Required fields are marked *