Pannellum：实例之通过全景图游览

最新推荐文章于 2024-05-09 09:54:06 发布

KaiSarH

最新推荐文章于 2024-05-09 09:54:06 发布

阅读量1.4k

点赞数

分类专栏：第三方框架

本文链接：https://blog.csdn.net/kaisarh/article/details/103117193

版权

第三方框架专栏收录该内容

148 篇文章 23 订阅

订阅专栏

使用添加hotSpots参数并对其设置,可以对全景图片添加热点.

效果:游览

代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author"content=“KaiSarH,huankai7@163.com”>
    <title>Custom controls</title>
    <link rel="stylesheet" href="pannellum.css"/>
    <script type="text/javascript" src="pannellum.js"></script>

    <style>
        #panorama {
            width: 1200px;
            height: 800px;
        }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
    pannellum.viewer('panorama', {
        "default": {
            "firstScene": "circle",
            "author": "KaiSarH",
            // 设置切换持续时间
            "sceneFadeDuration": 3000
        },

        "scenes": {
            "circle": {
                "title": "Mason Circle",
                "hfov": 110,
                "pitch": -3,
                "yaw": 117,
                "type": "equirectangular",
                "panorama": "test/test.jpg",
                "hotSpots": [
                    {
                        "pitch": -2.1,
                        "yaw": 132.9,
                        "type": "scene",
                        "text": "Spring House or Dairy",
                        "sceneId": "house"
                    }
                ]
            },

            "house": {
                "title": "Spring House or Dairy",
                "hfov": 110,
                "yaw": 5,
                "type": "equirectangular",
                "panorama": "test/test1.png",
                "hotSpots": [
                    {
                        "pitch": -0.6,
                        "yaw": 37.1,
                        "type": "scene",
                        "text": "Mason Circle",
                        "sceneId": "circle",
                        "targetYaw": -23,
                        "targetPitch": 2
                    }
                ]
            }
        }
    });
</script>
</body>
</html>