Pannellum全景实战开发

最新推荐文章于 2022-10-12 17:57:46 发布

凉薄繁华

最新推荐文章于 2022-10-12 17:57:46 发布

阅读量3.8k

点赞数 3

分类专栏：前端js 文章标签： Pannellum 全景图展示 Java全景照片 Pannellum全景制作

本文链接：https://blog.csdn.net/jie426113/article/details/88660407

版权

前端js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>&ndash;&gt;-->
<!--获取项目名-->
<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中判断是否使用自定义样式

可根据自身需求修改，图片地址可根据相关主键加载，遍历相关代码，实现上传展示场景跳转。

凉薄繁华

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
Pannellum全景实战开发

Pannellum实战开发相关介绍，自行百度.相关js如下，使用springBoot的thymeleaf,相关引用资源可自行根据实际项目引用<html xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8"> <meta name="viewport"...
复制链接

扫一扫