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、結果展示