Pannellum 360全景图片展示

1、介绍

Pannellum是用于Web的轻量级,免费和开放源代码的360全景图片查看器。它是使用HTML5,CSS3,JavaScript和WebGL构建的,没有插件。

提供了大图片切片工具generate.py Python脚本,可展示多分辨率图片。

2、影像切片

也可以不切片,但是图片太大就要切片,可提高加载效率。

提供了docker镜像,可免于安装依赖,切片过程如下(win10系统):

3、使用方法

复制代码

var viewer = pannellum.viewer('panorama', {
            "autoRotate": -2,
            "default": {
                "firstScene": "DJI_0157",
                "sceneFadeDuration": 1000,
                "autoLoad": true
            },
            "scenes": {
                "DJI_0157": {
                    "title": "1/阳朔市DJI_0157",
                    "hfov": 100,
                    "pitch": 10,
                    "yaw": 50,
                    "compass": false,
                    "northOffset": 289,
                    "type": "multires",
                    "multiRes": {
                        "basePath": "http://ip:9008/file/360pic/output/DJI_0157",
                        "path": "/%l/%s%y_%x",
                        "fallbackPath": "/fallback/%s",
                        "extension": "jpg",
                        "tileResolution": 512,
                        "maxLevel": 4,
                        "cubeResolution": 2600
                    },
                    "hotSpots": [
                        {
                            "pitch": -2.1,
                            "yaw": 132.9,
                            "type": "scene",
                            "text": "阳朔市DJI_0158",
                            "sceneId": "DJI_0158"
                        }
                    ]
                },
                "DJI_0158": {
                    "title": "2/阳朔市DJI_0158",
                    "hfov": 100,
                    "pitch": 10,
                    "yaw": 50,
                    "compass": false,
                    "northOffset": 289,
                    "type": "multires",
                    "multiRes": {
                        "basePath": "http://ip:9008/file/360pic/output/DJI_0158",
                        "path": "/%l/%s%y_%x",
                        "fallbackPath": "/fallback/%s",
                        "extension": "jpg",
                        "tileResolution": 512,
                        "maxLevel": 4,
                        "cubeResolution": 2600
                    },
                    "hotSpots": [
                        {
                            "pitch": -2.1,
                            "yaw": 132.9,
                            "type": "scene",
                            "text": "阳朔市DJI_0159",
                            "sceneId": "DJI_0159"
                        }
                    ]
                },

复制代码

4、结果展示

猜你喜欢

转载自blog.csdn.net/u014556081/article/details/113185762