基於web的全景—— Pannellum小試

時間 2019-11-08

原文原文鏈接

前言

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

`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部分：javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全景</title>
    <!-- pannellum 自帶的樣式，必需 -->
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
</head>

<body>
    <div id='vrview' class="container"></div>
    <!-- pannellum js庫，必需 -->
    <script src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
</body>

</html>

css代碼：css

<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .custom-hotspot {
        height: 50px;
        width: 50px;
        border-radius: 100%;
        box-shadow: 0 0 6px #fff;
        background: #fff;
    }
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 3px;
        background-color: #fff;
        color: #000;
        text-align: center;
        max-width: 200px;
        padding: 5px 10px;
        margin-left: -220px;
        cursor: default;
    }
    div.custom-tooltip:hover span{
        visibility: visible;
    }
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        bottom: -20px;
        left: -10px;
        margin: 0 50%;
    }
</style>

js部分：html

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一些全景用到的元素。
java

關於初始化配置，對於多場景的全景來講最好使用 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的文檔，能夠發現有不少功能豐富的配置項；在這裏主要介紹一些經常使用到的配置；web

`firstScene`

全景的默認場景，每一個多場景的全景都須要在default裏面配置此選項；瀏覽器

`author`

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

`sceneFadeDuration`

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

`orientationOnByDefault`

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

`showControls`

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

`autoRotate`

是否自動旋轉，在加載以後，全景圖會水平旋轉顯示，負數爲往右邊旋轉，整數爲往左邊旋轉，值爲數字類型；（目前還不知道數字表明是角速度仍是什麼）

`autoRotateInactivityDelay`

在autoRotate設定的狀況下，用戶中止操做多長時間後繼續自動旋轉，單位爲毫秒；

`scenes`

場景，值爲對象，其屬性名錶明着場景的id（sceneId），屬性值爲viewer的配置參數，其參數會覆蓋默認（上述中的default對象）設置的參數；

`hotSpots`

熱點，以全景爲座標系的固定點，能夠設置連接跳轉和點擊事件，也能夠跳轉到不一樣的場景，該屬性的值爲對象，該對象有幾個經常使用的配置項：

pitch 定位參數，單位：角度

yaw 定位參數，單位：角度

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

URL 以熱點爲連接，跳轉到其餘頁面的`url

sceneId 須要切換的場景id，當 type 爲 scene使用；

全景座標示意圖：

（圖片來源於網絡）

總結

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