全景组件 Pannellum 的简单使用 自定义点击事件

Pannellum github地址

Pannellum CDN

<!-- Latest compiled and minified standalone viewer -->
https://cdn.pannellum.org/2.5/pannellum.htm

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.4/build/pannellum.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.4/build/pannellum.css">

// 多场景配置
      let panoramadata = pannellum.viewer('panorama', {
          "firstScene": this.nextPano.id,//首次加载那个图片
          // "author": "lyj",//作者
          "sceneFadeDuration": 1000,//全景图场景切换时的持续时间
          "autoLoad": false,//自动加载
          // "orientationOnByDefault": true,//是否开启重力感应查看全景图，默认false
          "showControls": false,//是否显示控制按钮，默认true；
          // "autoRotate": -2,//是否自动旋转，在加载之后，全景图会水平旋转显示，负数为往右边旋转，整数为往左边旋转，值为数字类型；
          // "autoRotateInactivityDelay": 5000,//在autoRotate设定的情况下，用户停止操作多长时间后继续自动旋转，单位为毫秒；
          "mouseZoom": true,
          // "minPitch": 0,
          // "maxPitch": 0,
          "hfov": 100,
          "minHfov": 60,
          "maxHfov": 120,
          //场景，值为对象，其属性名代表着场景的id（sceneId），属性值为viewer的配置参数，其参数会覆盖默认（上述中的default对象）设置的参数；
          "scenes":{
             "firstScene":{ 
                "title":"第一个场景",
                "type":"cubemap",
                "cubeMap":[
                  "./example_front.jpg","./example_right.jpg",
                  "./example_behind.jpg","./example_left.jpg",
                  "./example_up.jpg", "./example_down.jpg"
                ],
                "hotSpots":[{//热点，以全景为坐标系的固定点，可以设置链接跳转和点击事件，也可以跳转到不同的场景，该属性的值为对象
                  "pitch":-12, //定位参数， 单位：角度
                  "yaw":170,//定位参数， 单位：角度 y轴，空间中的纵轴
                  "type":"scene",//热点类型，scene 场景切换热点； info 信息展示；URL 以热点为链接，跳转到其他页面的`url
                  "sceneId":"secondScene",//sceneId 需要切换的场景id，当 type 为 scene使用；
                  "text":"点击前往第二个场景."
                }]
              },                          
              "secondScene":{
                "title":"第二个场景",
                "panorama":"./examplepano.jpg",
                "hotSpots":[{
                  "pitch":0,"yaw":100,
                  "type":"scene",
                  "text":"前往第一个场景",
                  "sceneId":"firstScene"
                  "cssClass":"pnlm-hotspot pnlm-model pnlm-scene1 pnlm-type1",//自定义样式
                }]
              }                    
          } //注 scenes 为对象
      });

关于自定义样式：

  <style>
    .pnlm-hotspot {

    }
    .pnlm-hotspot:hover {
      
    }
    .pnlm-sprite {
      width: 2rem;
      height: 2rem;
      background: url('./static/pano/assets/gogogo.gif') no-repeat;
      background-size: 100% 100%;
    }
    .pnlm-model {
      width: 2rem;
      height: 2rem;
      background: url('./static/images/cover.png') no-repeat;
      background-size: 100% 100%;
    }
    .pnlm-hotspot.pnlm-info{

    }
    .pnlm-hotspot.pnlm-scene{
      
    }
    .pnlm-scene1 {
      
    }
  </style>

Pannellum 官方支持的两种类型

图片类型，如果图片过大则会超出屏幕：
视频演示，使用视频为网易云音乐下载的《止战之殇》MV

关于自定义热点事件，提供一个思路可以从cssClass（class）实现

"cssClass":"pnlm-hotspot pnlm-model pnlm-scene1 pnlm-type1",//自定义样式