摘要：前言基于端的業(yè)務(wù)需求，為了更好地服務(wù)于用戶。需要在售賣端加上全景預(yù)覽的功能，目前用的是開發(fā)的產(chǎn)品，需要基于的全景預(yù)覽功能。關(guān)于初始化配置，對(duì)于多場景的全景來說最好使用和屬性組成的配置項(xiàng)。

基于C端的業(yè)務(wù)需求，為了更好地服務(wù)于用戶。需要在售賣端加上全景預(yù)覽的功能，目前用的是web開發(fā)的產(chǎn)品，需要基于web的全景預(yù)覽功能。通過搜索查找比較，最終選擇使用pannellum。

官網(wǎng)的首頁對(duì)pannelum的描述是，"Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free."

簡而言之，pannelum是輕量的（只有20kB）、免費(fèi)的、開源的一個(gè)基于web的全景插件。
那么從一個(gè)小小的demo開始。
HTML部分：

css代碼：

js部分：

window.addEventListener("load", bodyLoad);
var p;
function bodyLoad() {
    // 多場景配置
    p = pannellum.viewer("vrview", {   
        "default": {
            "firstScene": "circle",
            "author": "Juven",
            "sceneFadeDuration": 1000,
            "orientationOnByDefault": true,
            "showControls": false,
            "autoRotate": -2,
            "autoRotateInactivityDelay": 2000
        },

        "scenes": {
            "circle": {
                "title": "Sea Circle",
                "hfov": 110,
                "pitch": -3,
                "yaw": 117,
                "type": "equirectangular",
                "panorama": "../assets/images/pic2.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": "../assets/images/pic1.jpg",
                "hotSpots": [
                    {
                        "pitch": -0.6,
                        "yaw": 37.1,
                        "type": "scene",
                        "text": "Mason Circle",
                        "sceneId": "circle",
                        "targetYaw": -23,
                        "targetPitch": 2
                    }
                ]
            }
        }
    });
}

打開這個(gè)html文件，在window的load事件開始時(shí)執(zhí)行初始化全景代碼，其中pannellum對(duì)象是掛載在window對(duì)象下的，調(diào)用viewer方法來初始化并返回一個(gè)viewer實(shí)例，第一個(gè)參數(shù)是元素的id（也可以是HTMLElement元素），第二個(gè)事配置對(duì)象，該對(duì)象下面可以是一些基本的配置參數(shù)，也可以是由default和scenes屬性組成的配置項(xiàng)。初始化時(shí)，會(huì)將被掛載的元素append一些全景用到的元素。

關(guān)于初始化配置，對(duì)于多場景的全景來說最好使用default和scenes屬性組成的配置項(xiàng)。詳細(xì)內(nèi)容可參考原文：A tour configuration file contains two top level properties, default and scenes. The default property contains options that are used for each scene, but options specified for individual scenes override these options. The default property is required to have a firstScene property that contains the scene ID for the first scene to be displayed. The scenes property contains a dictionary of scenes, specified by scene IDs. The values assigned to these IDs are specific to each scene.

查看pannellum的文檔，可以發(fā)現(xiàn)有很多功能豐富的配置項(xiàng)；在這里主要介紹一些常用到的配置；

全景的默認(rèn)場景，每個(gè)多場景的全景都需要在default里面配置此選項(xiàng)；

作者名稱，全景圖生成時(shí)，會(huì)在左下角顯示此配置的值；

全景圖場景切換時(shí)的持續(xù)時(shí)間，單位為：毫秒，使用的動(dòng)畫效果默認(rèn)為fade；

是否開啟重力感應(yīng)查看全景圖，默認(rèn)false；

是否顯示控制按鈕，默認(rèn)true；

是否自動(dòng)旋轉(zhuǎn)，在加載之后，全景圖會(huì)水平旋轉(zhuǎn)顯示，負(fù)數(shù)為往右邊旋轉(zhuǎn)，整數(shù)為往左邊旋轉(zhuǎn)，值為數(shù)字類型；（目前還不知道數(shù)字代表是角速度還是什么）

在autoRotate設(shè)定的情況下，用戶停止操作多長時(shí)間后繼續(xù)自動(dòng)旋轉(zhuǎn)，單位為毫秒；

場景，值為對(duì)象，其屬性名代表著場景的id（sceneId），屬性值為viewer的配置參數(shù)，其參數(shù)會(huì)覆蓋默認(rèn)（上述中的default對(duì)象）設(shè)置的參數(shù)；

熱點(diǎn)，以全景為坐標(biāo)系的固定點(diǎn)，可以設(shè)置鏈接跳轉(zhuǎn)和點(diǎn)擊事件，也可以跳轉(zhuǎn)到不同的場景，該屬性的值為對(duì)象，該對(duì)象有幾個(gè)常用的配置項(xiàng)：

pitch 定位參數(shù)， 單位：角度

yaw 定位參數(shù)， 單位：角度

type 熱點(diǎn)類型，scene 場景切換熱點(diǎn)； info 信息展示；

URL  以熱點(diǎn)為鏈接，跳轉(zhuǎn)到其他頁面的`url

sceneId 需要切換的場景id，當(dāng) type 為 scene使用；

全景坐標(biāo)示意圖：

（圖片來源于網(wǎng)絡(luò)）

經(jīng)過一個(gè)小小的示例測試，目前在PC端的Chrome瀏覽器運(yùn)行正常流暢，在iPhone的Safari瀏覽器和微信運(yùn)行流暢，在低版本Android微信運(yùn)行略為卡頓，但還是能夠接受的范圍內(nèi)；有個(gè)不好的地方就是pannellum的官方文檔是全英文的（可能我沒找到中文的）且解析的不夠全面，示例也不足夠多，總體來說pannellum還是不錯(cuò)的選擇，有需要的同學(xué)可以考慮一下。