基于vue全景-Pannellum 项目开发

cyydd21

已于 2024-06-24 14:02:40 修改

阅读量1.3k

点赞数

文章标签：前端 javascript vue.js

于 2022-10-12 17:57:46 首次发布

本文链接：https://blog.csdn.net/cyydd21/article/details/127286748

版权

本文介绍了如何使用Vue.js结合Pannellum库进行全景图项目开发，包括从官网下载引入资源，创建全景对象的JS代码示例，以及详细讲解了多场景设置和事件触发机制。

摘要由CSDN通过智能技术生成

一.下载引入

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

  <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)