vue-pannellum

Vue wrap of the brilliant panorama viewer Pannellum

Usage

Install

``
npm install vue-pannellum
`

Register

`js
import Vue from 'vue'
import VuePannellum from 'vue-pannellum'

Vue.component('VPannellum', VuePannellum)
`

Use

`html

`

Src types

$3

`js
src = equirectangularUrl
`

$3

`js
src = {
px: cubemapUrlPx,
nx: cubemapUrlNx,
py: cubemapUrlPy,
ny: cubemapUrlNy,
pz: cubemapUrlPz,
nz: cubemapUrlNz,
}
`

$3

`js
src = {
default: {
firstScene: 'cube',
},
scenes: {
cube: {
hfov: 110,
pitch: -3,
yaw: 117,
type: 'equirectangular',
panorama: equirectangularUrlCube,
hotSpots: [...],
},
grid: {
hfov: 110,
yaw: 5,
type: 'equirectangular',
panorama: equirectangularUrlGrid,
hotSpots: [...],
},
},
}
`

API

$3

- src (required): See above.
- preview: The preview image url before loaded.
- autoLoad (boolean, default: true): Whether automatically load.
- autoRotate (number|boolean, default: 0): The auto-rotate speed, 0 or false means disabled, true is -2.
- orientation (boolean, default: false): Turn the orientation sensor on (if supported).
- draggable (boolean, default: true): Allow rotating with mouse or touch dragging.
- mouseZoom (boolean, default: true): Allow zooming with mouse.
- doubleClickZoom (boolean, default: true): Allow zooming with double click.
- showZoom (boolean, default: false): Show the zoom-in and zoom-out button.
- showFullscreen (boolean, default: false): Show the fullscreen button.
- compass (boolean, default: false): Show the compass indicator.
- hotSpots (array, default: []): Show information on the panorama.
- hfov (number, default: 75): The initial horizontal field of view in degrees.
- yaw (number, default: 0): The initial yaw position in degrees.
- pitch (number, default: 0): The initial pitch position in degrees.
- minHfov (number, default: 30): The minimum limit of hfov in degrees.
- maxHfov (number, default: 120): The maximum limit of hfov in degrees.
- crossOrigin (string, default: anonymous): Specify the type of CORS request used. Can be set to anonymous or use-credentials

Events

- load: When finish loading.
- error`: When an error occurs, error message as parameter.

Features

- type
- autoLoad
- autoRotate
- compass
- show/hide control button
- preview
- initial view: hfov/yaw/pitch
- slot
- watch url changing
- max/minHfov
- orientation

Licence

MIT