pannellum.js 使用

pannellum.js 官网

一、导入 js

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

二、初始化(简单使用)

三、动态添加热点

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);
          },
        });
      },
    },