A panoramic media viewer for the mobile web ↪️🌐↩️
#photoSphere #panorama #motion-tracking

Projection Types

PanoViewer offers five projection types. You can see video with the projection.


Equirectangular's image

The equirectangular projection (also called the equidistant cylindrical projection, geographic projection, or la carte parallélogrammatique projection, and which includes the special case of the plate carrée projection or geographic projection) is a simple map projection attributed to Marinus of Tyre, who Ptolemy claims invented the projection about AD 100.


Cubemap's image

cube mapping is a method of environment mapping that uses the six faces of a cube as the map shape. The environment is projected onto the sides of a cube and stored as six square textures, or unfolded into six regions of a single texture.


Cubestrip's image

Cubestrip is a format for a single image with a combination of six cube faces. It is almost identical to cubemap, but it is implemented in a different way. It aims at better performance and efficiency. In addition, it automatically detects and supports EAC.


Panorama's image

A panorama is any wide-angle view or representation of a physical space, whether in painting, drawing, photography, film, seismic images or a three-dimensional model.

Stereoscopic Equirectangular

Stereoscopic Equirectangular's image

Stereoscopy image format of EQUIRECTANGULAR. It is an experimental function to show a stereoscopic type equirectangular image on a plane. It does not support stereoscopic viewing function through special visual equipment at present.



  • Projection Type
    • Equirectangular
    • Cubemap
      • EAC (Equi Angular Cubemap) (v3.1+)
    • Stereoscopic Equirectangular (v3.2+)
    • Smartphone Panorama (v3.2+)
  • Video Support (v3.0+)
  • Customized Cubemap
    • Layout: 1 x 6, 6 x 1, 2 x 3, 3 x 2 (v3.0+)
    • 6 Indivisual Image (v3.0+)
    • 6 Merged Image
  • Device motion(Gyro Sensor) control
    • 2 way (yaw, pitch Control)
    • 3 way (VR Control) (v3.0+)
  • Touch Direction Control (v3.0+)
    • It enables native scroll (except VR Control Mode)

Browser support

Browsers with stable WebGL


  • Lastest version of Chrome, Firefox, Safari, EDGE
  • IE 11


  • Safari (iOS 8+)
  • Chrome for android
  • Samsung Internet 4+

Getting Started



In case using npm,

npm install @egjs/view360 --save

script tag

In case using script tag, Download the latest version of view360.js and include using the script tag

<!--script src="/path/to/js/release/latest/dist/PanoViewer/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script-->
<script src="//"></script>

Download link


1. Set up your Container Element

Your container element’s dimensions should be defined.

<div id="myPanoViewer"></div>

2. Import Module

// Use global namespace
var PanoViewer = eg.view360.PanoViewer;
// Or use es6 import
import {PanoViewer} from "@egjs/view360";

3. Initialize PanoViewer

// create PanoViewer with option
const panoViewer = new PanoViewer(
    image: "/path/to/image/image.jpg"

For more information about API, please visit the link.


Don't see your project? Post an issue with built-with-view360 label over on the github page.