Pannellum实战开发
相关介绍，自行百度.
相关js如下，使用springBoot的thymeleaf,相关引用资源可自行根据实际项目引用
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" th:href="@{/resources/commons/pannellum/css/pannellum.css}">
<link rel="stylesheet" type="text/css" th:href="@{/resources/commons/pannellum/css/customself.css}">
<link rel="stylesheet" type="text/css" th:href="@{/resources/commons/pannellum/standalone/standalone.css}">
<style>
#panorama {
width: 100%;
height: 100%;
}
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="panorama"></div>
<!-- <canvas id="canvas" style="display:none"></canvas> -->
<script type="text/javascript" th:src="@{/resources/commons/pannellum/js/libpannellum.js}"></script>
<script type="text/javascript" th:src="@{/resources/commons/pannellum/js/pannellum.js}"></script>
<script type="text/javascript" th:src="@{/resources/commons/pannellum/js/RequestAnimationFrame.js}"></script>
<!--<script type="text/javascript" th:src="@{/common/third-part/pannellum/standalone/standalone.js}"></script>–>-->
<!--获取项目名-->
<script th:inline="javascript">
var ctxPath = [[@{/}]];
</script>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",//Pannellum支持四种处理全景图片的方式：equirectangular,partial,cubic,multi-resolution
"panorama": ctxPath+"resources/commons/img/allView/i6.jpg",//图片路径
"author":"lyj",//展示全景图作者
"showControls":true,
"allow_user_interactions":false,
"showControls": false,//是否显示控制按钮，默认true；
"autoLoad": true,
});
window.addEventListener('load', bodyLoad);
var p;
function bodyLoad() {
// 多场景配置
p = pannellum.viewer('panorama', {
"default": {
"firstScene": "circle",//首次加载那个图片
"author": "lyj",//作者
"sceneFadeDuration": 1000,//全景图场景切换时的持续时间
"autoLoad": true,//自动加载
"orientationOnByDefault": true,//是否开启重力感应查看全景图，默认false
"showControls": false,//是否显示控制按钮，默认true；
"autoRotate": -2,//是否自动旋转，在加载之后，全景图会水平旋转显示，负数为往右边旋转，整数为往左边旋转，值为数字类型；
"autoRotateInactivityDelay": 2000//在autoRotate设定的情况下，用户停止操作多长时间后继续自动旋转，单位为毫秒；
},
//场景，值为对象，其属性名代表着场景的id（sceneId），属性值为viewer的配置参数，其参数会覆盖默认（上述中的default对象）设置的参数；
"scenes": {
"circle": {
"title": "盟",
"hfov": 110,
"pitch": -3,
"yaw": 117,
"type": "equirectangular",
"panorama": ctxPath+"resources/commons/img/allView/i6.jpg",//图片路径
"hotSpots": [ //热点，以全景为坐标系的固定点，可以设置链接跳转和点击事件，也可以跳转到不同的场景，该属性的值为对象
{
"pitch": -2.1,//定位参数， 单位：角度
"yaw": 132.9,//定位参数， 单位：角度 y轴，空间中的纵轴
"type": "scene", //热点类型，scene 场景切换热点； info 信息展示；URL 以热点为链接，跳转到其他页面的`url
"text": "Comn on",
"cssClass":" pnlm-hotspot pnlm-sprite pnlm-scene1",//自定义样式
"sceneId": "house"//sceneId 需要切换的场景id，当 type 为 scene使用；
}
]
},
"house": {
"title": "I LVOE YOU",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": ctxPath+"resources/commons/img/allView/i2.jpg",//图片路径
"hotSpots": [
{
"pitch": -0.6,
"yaw": 37.1,
"type": "scene",
"text": "go on",
"sceneId": "love",
"targetYaw": -23,
"targetPitch": 2
},{
"pitch": -2.1,//定位参数， 单位：角度
"yaw": 232.9,//定位参数， 单位：角度 y轴，空间中的纵轴
"type": "scene", //热点类型，scene 场景切换热点； info 信息展示；URL 以热点为链接，跳转到其他页面的`url
"text": "back",
"sceneId": "circle"//sceneId 需要切换的场景id，当 type 为 scene使用；
}
]
},
"love": {
"title": "全景照片",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": ctxPath+"resources/commons/img/allView/i4.jpg",//图片路径
"hotSpots": [
{
"pitch": -0.6,
"yaw": 37.1,
"type": "info",
"text": "全景照片",
"targetYaw": -23,
"targetPitch": 2
},{
"pitch": -2.1,//定位参数， 单位：角度
"yaw": 232.9,//定位参数， 单位：角度 y轴，空间中的纵轴
"type": "scene", //热点类型，scene 场景切换热点； info 信息展示；URL 以热点为链接，跳转到其他页面的`url
"text": "back",
"sceneId": "house"//sceneId 需要切换的场景id，当 type 为 scene使用；
}
]
}
}
});
}
</script>
</body>
</html>
其中hotSpots为场景跳转，可在场景中添加多个scene类型。
根据业务要求，场景跳转必须有前进和退回，则在前进的场景中添加添加两个scene类型分别支持前进和退回功能。由于原始sprites.svg图标样式没有需要的后退图标，所以修改原始的sprites.svg图标样式，同时给后退的scene添加cssClass标签，在pannellum.css添加图标样式。
sprites.svg图标
修改图标，自定义图标如上.pnlm-scene1
添加自行修改样式cssClass
原始js中判断是否使用自定义样式
可根据自身需求修改，图片地址可根据相关主键加载，遍历相关代码，实现上传展示场景跳转。