HTML5 panorama viewer Javascript

June 22, 2014
HTM5-parorama
Category: Over WWW Scripts
Note: Free

Reference to : http://www.cheetah3d.com/download/HTML5pano/

Description

Experimental HTML5 panorama viewer using the new HTLM5 canvas element. This script displays equirectangular (360×180) panoramas. So just one image is necessary to display a complete 360×180 panorama.

Purpose

I mainly was curious how fast equirectangular panorama image can be displayed with a HTML5 canvas. So the script isn’t cleaned up very well, but it gave me at least an idea that it is possible. On my an Intel Core i7 CPU I get more than 20 frames per second. That is of course not very fast but usable. And the best of all it doesn’t require any Plug-Ins 🙂

Navigation

  • Left/Right Mouse drag: Changes camera heading.
  • Up/Sown Mouse drag: Changes camera pitch.
  • Scroll wheel: Changes camera field of view.
  • I-Key: Displays Info panel with canvas size, image size and FPS.

Requirements

I’ve tested this HTML5 panorama script with the latest versions of Safari, Firefox and Chrome on Mac OS X. But it should also run on other platforms supporting HTML5.

License

The html5pano.js script is released under the Simplified BSD License. Please see comments within the script.

Dowload

Please use the following link to download the script including a sample panorama image.

http://www.cheetah3d.com/download/HTML5pano/HTML5pano.zip