摘要：前言基于端的業務需求，為了更好地服務于用戶。需要在售賣端加上全景預覽的功能，目前用的是開發的產品，需要基于的全景預覽功能。關于初始化配置，對于多場景的全景來說最好使用和屬性組成的配置項。

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

官網的首頁對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）、免費的、開源的一個基于web的全景插件。
那么從一個小小的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
                    }
                ]
            }
        }
    });
}

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

關于初始化配置，對于多場景的全景來說最好使用default和scenes屬性組成的配置項。詳細內容可參考原文：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的文檔，可以發現有很多功能豐富的配置項；在這里主要介紹一些常用到的配置；

全景的默認場景，每個多場景的全景都需要在default里面配置此選項；

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

全景圖場景切換時的持續時間，單位為：毫秒，使用的動畫效果默認為fade；

是否開啟重力感應查看全景圖，默認false；

是否顯示控制按鈕，默認true；

是否自動旋轉，在加載之后，全景圖會水平旋轉顯示，負數為往右邊旋轉，整數為往左邊旋轉，值為數字類型；（目前還不知道數字代表是角速度還是什么）

在autoRotate設定的情況下，用戶停止操作多長時間后繼續自動旋轉，單位為毫秒；

場景，值為對象，其屬性名代表著場景的id（sceneId），屬性值為viewer的配置參數，其參數會覆蓋默認（上述中的default對象）設置的參數；

熱點，以全景為坐標系的固定點，可以設置鏈接跳轉和點擊事件，也可以跳轉到不同的場景，該屬性的值為對象，該對象有幾個常用的配置項：

pitch 定位參數， 單位：角度

yaw 定位參數， 單位：角度

type 熱點類型，scene 場景切換熱點； info 信息展示；

URL  以熱點為鏈接，跳轉到其他頁面的`url

sceneId 需要切換的場景id，當 type 為 scene使用；

全景坐標示意圖：

（圖片來源于網絡）

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