Nowadays, a lot of devices allow the user to create very interesting panorama images but not with only 180 degrees, but 360. Unlike cylindrical views, spherical panoramas incorporate a 180° vertical viewing angle and a 360° horizontal viewing angle. They contain light data originating from all directions, and therefore can be visualized as comprising the points on a sphere. This format has become popular in social media and marketing and has found application in 3D graphics programs, simulations of interiors, immersive panoramic movies, and computer and video games. An equirectangular panorama consists of a single rectangular image whose width and height correlate as 2:1.
If you are willing to display that kind of images in the web, you will need a special piece of code to make it work. In this article, we'll share with you 7 libraries that will allow you to embed equirectangular images in the browser so the user can interact with theme easily.
Unlike Panolens.js that is based on Three.js too, this basic demo contains the base code to implement your own 360 image viewer with only Three.js.
360-image-viewer is a standalone panorama WebGL image viewer for desktop and mobile. This uses regl as the WebGL wrapper, and comes in at a total of 140kb uglified, or 46kb gzipped. This is useful if you need a panorama viewer but don't want to embed all of ThreeJS (which is around 500kb uglified).
Kaleidoscope is an embeddable, lightweight, dependency-free 360º video/image viewer. 360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some CORS implementation bugs.
Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download minified three.js and minified panolens.js and include these two files in your project. The plugin features:
- Support equirectangular image
- Support cubemap images
- Support google streetview with panoId (How to get Panorama ID)
- Support 360 equirectangular video (like youtube/facebook 360 video) even on iOS!
- Support text/image/domElement annotations (Infospot)
- Built-in Orbit / DeviceOrientation camera controls
- Built-in fullscreen and video control widgets
- Convert equirectangular image into little planet (Stereographic projection)