yusangeng/pano.gl

Panorama image & video viewer.

pano.gl

Equirectangular video/image viewer based on WebGL.

Features

• Pure javascript.
• Multiple camera models: perspective/cylindrical/planet/pannini.

Install

npm install pano.gl --save

Build

git clone https://github.com/yusangeng/pano.gl.git
cd pano.gl
npm i
npm run build

The bundle files should be in ./.package.

Usage

Image Viewer

import FramelessImageViewer 'pano.gl/lib/FramelessImageViewer'

const viewer = new FramelessImageViewer({
  el: '#image-viewer-wrap', // container DOM element.
  src: '//www.foobar.com/path/to/image',
  camera: {
    type: 'perspective' // perspective/cylindrical/planet/pannini.
  }
})

Video Viewer

import FramelessVideoViewer 'pano.gl/lib/FramelessVideoViewer'

const viewer = new FramelessVideoViewer({
  el: '#video-viewer-wrap', // container DOM element.
  src: '#video', // <video /> DOM element as texture data source.
  camera: {
    type: 'perspective' // perspective/cylindrical/planet/pannini.
  }
})

Switching Camera

viewer.cameraOptions = {
  type: 'cylindrical' // perspective/cylindrical/planet/pannini.
}

Rotating Camera

const deltaX = 1
const deltaY = 2

viewer.rotate(deltaX, deltaY)

Zooming Camera

const delta = 0.1

viewer.zoom(delta)

Enabling / Disabling PTZ

// true: PTZ Enabled, false: PTZ disabled.
viewer.PTZ = false