vue-pannellum

Vue wrap of the brilliant panorama viewer Pannellum

Usage

Install

npm install vue-pannellum

Register

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

Vue.component('VPannellum', VuePannellum)

Use

<v-pannellum :src="equirectangularUrl" style="height: 500px;"></v-pannellum>

Src types

1 Equirectangular

src = equirectangularUrl

2 Cubemap

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

3 Tour (more details)

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

Component props

• 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

Changelog

v0.5.0 - 2019/07/19

• Update dependency pannellum to v2.5.2

v0.4.8 - 2019/05/29

• Limit pitch within -90 and 90.

v0.4.7 - 2019/05/27

• Support hotSpots.

v0.4.6 - 2019/05/14

• Fix an error on some mobile browser.

v0.4.5 - 2019/05/08

• Fix image quality may be bad on some mobile browser.

v0.4.4 - 2019/05/07

• Properties hfov, yaw, pitch can be two-way bound with .sync modifier now.