@fsenn/vue-pannellum

Vue wrap of the brilliant panorama viewer Pannellum

Usage no npm install needed!

<script type="module">
  import fsennVuePannellum from 'https://cdn.skypack.dev/@fsenn/vue-pannellum';
</script>

README

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('VPannellumn', VuePannellum)

Use

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

API

Component props:

  • src (required): The equirectangular image url or cubemap urls in this format: {px: pxUrl, nx: nxUrl, ... }.
  • 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).
  • 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.

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