百度智能小程序 VR 全景圖-beta

panoviewer VR 全景圖-beta

panoviewer 動態(tài)庫提供了在小程序中播放全景圖的方法，底層基于百度 webVR SDK Hydreigon 實(shí)現(xiàn)。

使用方法

1. 在項(xiàng)目中引用動態(tài)庫

使用動態(tài)庫的方法參見小程序文檔：使用動態(tài)庫，在 app.json 中增添一項(xiàng) dynamicLib，與 pages 同級。

"dynamicLib": {
    "myDynamicLib": {
        "provider": "panoviewer"
    }
},

2. 在使用到組件的頁面配置動態(tài)庫

在每個(gè)使用到圖表組件的頁面，配置 *.json 文件如：

{
    "usingSwanComponents": {
        "panoviewer": "dynamicLib://myDynamicLib/panoviewer"
    }
}

3. 編寫 *.swan 文件

<panoviewer options="{{ options }}" style="width: 100%; height: 100%; display: block"></panoviewer>

這是一種最基本的配置方式。style 也可以在 *.css 中聲明，需要保證 <panoviewer> 是有寬度和高度的。options 在 *.js 中綁定到頁面的 data 中：

const options = ...;
Page({
    data: {
        options: options
    }
});

其中，options 是配置項(xiàng)，定義了全景圖的物料資源地址和渲染交互配置，一個(gè)典型的配置如下所示：

options = {
    "image": "https://xxx.com/.../xxx.jpg",
    "smallPlanet": 3000,
    "config": {
        "projectionType": "equirectangular"
    }
};

動態(tài)庫屬性列表

<panoviewer> 上支持的屬性包括：

關(guān)鍵配置項(xiàng)說明

投影模式

動態(tài)庫支持多種投影模式，包括球形、立方體、EAC、手機(jī)全景、分級分塊，投影模式對應(yīng)的名稱如下表：

除分級分塊模式外，其他模式的 image 字段為資源 url，分級分塊模式的 image 參數(shù)是切片腳本生成的配置，說明如下：

示例配置如下：

{
    image: {
        basePath:
            "https://hydreigon-publish.cdn.bcebos.com/swan-hydreigon/pano/lujiazui-4k/",
        path: "/%l/%s%y_%x",
        fallbackPath: "/fallback/%s",
        extension: "jpg",
        tileResolution: 512,
        maxLevel: 3,
        cubeResolution: 1304
    },
    config: {
        projectionType: "multires"
    }
}