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",//自定义样式