关于pannellum使用

1.使用npm 下载vue-pannellum

npm install vue-pannellum

2. 在main.js中引入，并且做全局配置

import VPannellum from 'vue-pannellum';   // 全局引入vue-pannellum
Vue.component('VPannellum', VPannellum);    // // 全局配置Vpannellum

3. 复制组件文件代码Vpannellum.vue，参数自行更改，代码中有注释

<template>
  <div
    id="panorama"
    ref="panorama"
  ></div>
</template>

<script>
/* global pannellum */
export default {
  name: "Vpannellum",
  props: {
    config: {
      type: Object,
      default: () => ({
        // 默认配置
        default: {
          firstScene: "circle",   // 页面初始化展示的场景id
          author: "作者名称",   // 左下角信息框中的作者名称，如果不需要，直接把这行注掉
          sceneFadeDuration: 1000,    // 跳转的时候淡入淡出属性，时间为毫秒
          autoLoad:true,    // 自动加载
          autoRotate: -2,   // 自动旋转
        },
        // 全景图配置
        scenes: {
          circle: {   // 场景id
            title: "当前全景画面名称",    // 左下角信息框中显示现在所在位置名称，如果不需要，直接把这行注掉
            hfov: 110,    // 水平视角，根据调整来展示宽度，数值越大看的越窄，数值越小，看的越宽，正常默认110
            pitch: -3,    // 俯仰角，数值大为仰，数值小为俯，默认值为0，即为平视
            yaw: 117,     // 旋转角，默认为0，范围-180到180，或者0到360，-180到180从-1开始为左，1开始为右；0到360为右
            type: "equirectangular",    // 全景图类型，equirectangular是已经做成完整的全景图，cubemap是由上下左右前后六个面的图片组成全景图的属性，multires是由多层级的图像瓦片组成的全景图属性，具体使用方法自己百度或者看pannellum文档
            panorama: "https://i.imgur.com.jpeg",   // 现在页面地址，最好做成url格式，我电脑有问题，不能用本地地址，到底能不能用本地地址，自己试
            hotSpots: [
              {
                pitch: -2.1,    // 跳转点所在的俯仰位置
                yaw: 132.9,   // 跳转点所在的左右位置点
                type: "scene",    // scene为跳转切换图标跟属性，info为显示信息热点，一般都是用于显示所在点位的一些信息，custom没用过，自己百度或者看pannellum文档
                text: "跳转箭头鼠标放置显示将要跳转名称",   // 跳转点显示名称
                sceneId: "house",   // 场景ID，sceneId后面的内容就是下一个场景的id，现在的id是house，那么跳转场景的id就要用house命名，如果跳转的场景id是puda，那么接下来跳转的场景id就要用puda来命名
              },
            ],
          },
          house: {
            title: "当前全景画面名称",
            hfov: 110,
            yaw: 5,
            type: "equirectangular",
            panorama: "https://i.imgur.com.jpeg",
            hotSpots: [
              {
                pitch: -0.6,
                yaw: 37.1,
                type: "scene",
                text: "跳转箭头鼠标放置显示将要跳转名称",
                sceneId: "circle",    // 因为要跳回第一个场景，那么sceneId后面的内容要是第一个场景的id：circle
                targetYaw: -23,   // 跳转回去的旋转角
                targetPitch: 2,   // 跳转回去的俯仰角
              },
            ],
          },
        },
      }),
    },
  },
  data() {
    return {
      panoramaViewer: null, // 存储pannellum.viewer的实例
      panoramaWidth: "100%", // 初始化全景图宽度
    };
  },
  mounted() {
    this.initPannellum();
    window.addEventListener('resize', this.adjustPanoramaSize);
  },
  beforeDestroy() {
    if (this.panoramaViewer) {
      this.panoramaViewer.destroy(); // 调用Pannellum的销毁方法，清理资源
    }
    window.removeEventListener('resize', this.adjustPanoramaSize);
  },
  methods: {
    initPannellum() {
      try {
        this.panoramaViewer = pannellum.viewer(this.$refs.panorama, this.config);
      } catch (error) {
        console.error("初始化全景图像:", error);
        // 这里可以添加用户友好的错误处理逻辑，比如显示错误信息
      }
    },
  },
};
</script>

<style scoped>
#panorama {
  width: 100%;
  height: 400px;
}
</style>

4.官方文档Pannellum