pannellum.js 官网

一、导入 js

pannellum.js 基于 three.js 开发，所以必须先引入 three.js

    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/pannellum/2.5.6/pannellum.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/pannellum/2.5.6/pannellum.js"></script>

二、初始化(简单使用)

<template>
  <div id="panorama" style="width:100vw;height:100vh"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    this.init().then(() => {});
  },
  methods: {
    init() {
      try {
        this.viewer = new window.pannellum.viewer('panorama', {
          type: 'equirectangular',
          panorama: 'https://pannellum.org/images/alma.jpg',
        });
        return Promise.resolve();
      } catch (error) {
        return Promise.reject(error);
      }
    },
  },
};
</script>

三、动态添加热点

addHotSpot(option)配置项，找到网页中的hotSpots配置

    mounted() {
      this.init().then(() => {
        this.viewer.on('mousedown', this.mousedown)
        this.viewer.on('mouseup', this.mouseup)
      })
    },
    methods: {
      init() {
        try {
          this.viewer = new window.pannellum.viewer('panorama', {
            type: 'equirectangular',
            panorama: 'https://pannellum.org/images/alma.jpg',
          });
          return Promise.resolve();
        } catch (error) {
          return Promise.reject(error);
        }
      },
      mousedown() {},
      mouseup(e) {
        this.viewer.addHotSpot({
          id: 'hot' + Date.parse(new Date()),
          type: 'info',
          pitch: this.viewer.mouseEventToCoords(e)[0],
          yaw: this.viewer.mouseEventToCoords(e)[1],
          text: '22223',
          clickHandlerArgs: '2xxxxx',
          sceneId: 'sun',
          scale: true,
          clickHandlerFunc: (e, data) => {
            console.log(2222231111, e);
            console.log(2222231111, data);
          },
        });
      },
    },