Equirectangular video/image viewer based on WebGL.
- Pure javascript.
- Multiple camera models: perspective/cylindrical/planet/pannini.
npm install pano.gl --savegit clone https://github.com/yusangeng/pano.gl.git
cd pano.gl
npm i
npm run buildThe bundle files should be in ./.package.
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.
}
})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.
}
})viewer.cameraOptions = {
type: 'cylindrical' // perspective/cylindrical/planet/pannini.
}const deltaX = 1
const deltaY = 2
viewer.rotate(deltaX, deltaY)const delta = 0.1
viewer.zoom(delta)// true: PTZ Enabled, false: PTZ disabled.
viewer.PTZ = false