基于vue全景-Pannellum 项目开发

一.下载引入 

需先从官网下载并引入文件

  <link rel="stylesheet" href="static/pannellum/pannellum.css"/>
  <script type="text/javascript" src="static/pannellum/pannellum.js"></script>

二.创建全景对象 

<div id="panorama" v-show="showscence" ></div>

js部分 

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg",//全景图片
    "title":"标题",
    "autoLoad":true,//是否自动加载
    "autoRotate":2,//是否自动旋转 正数顺时针 负数逆时针
    "showControls":false,//显示控件 默认为true
    "preview":"",//封面图
    "hotSpots":[ //热点
        {
          "pitch": -3.1,
          "yaw": -99,
          "type": "info",
          "sceneId": "3",
        }
    ]   
});

多场景设置

let viewer = new pannellum.viewer("panorama", {
  default: {
    firstScene: "1",
    sceneFadeDuration: 1000,//场景切换持续时间
    autoLoad: true,
    title: "",
  },
  scenes: {
    "1": {
      "hfov": 110,
      "pitch": -3,
      "yaw": 117,
      type: "equirectangular",
      panorama: "static/images/1.jpg",
      hotSpots: [
        {
          pitch: -1.8,
          yaw: -42.3,
          type: "scene",
          sceneId: "2",
        },
      ],
    },
    "2": {
      type: "equirectangular",
      panorama: "static/images/2.jpg",
      hotSpots: [
        {
          pitch: -3.1,
          yaw: -99,
          type: "scene",
          sceneId: "3",
        },
      ],
    },
  },
});

//多场景时可添加场景
viewer.addScene('1',{
  "type": "equirectangular",
  "panorama": "static/images/3.jpg",
  "hotSpots": [
      {
          "pitch": -3.1,
          "yaw": -99,
          "type": "scene",
          "sceneId": "3"
      }
  ]
});

三.事件触发

//鼠标点击触发 可以获取点击的俯角和偏航
viewer.on('mouseup',function(e){
   this.PitchYaw =viewer.mouseEventToCoords(e)
})

//获取当前俯角与偏航
viewer.getPitch() 
viewer.getYaw()

//场景自动加载
viewer.loadScene(sceneId)

//获取当前场景配置
viewer.getConfig()

//加载移除场景
viewer.loadScene(sceneId)
viewer.removeScene(sceneId)