百度智能小程序 VR 全景图-beta
panoviewer VR 全景图-beta
panoviewer 动态库提供了在小程序中播放全景图的方法，底层基于百度 webVR SDK Hydreigon 实现。
使用方法
1. 在项目中引用动态库
使用动态库的方法参见小程序文档：使用动态库，在 app.json 中增添一项 dynamicLib，与 pages 同级。
"dynamicLib": {
"myDynamicLib": {
"provider": "panoviewer"
}
},
2. 在使用到组件的页面配置动态库
在每个使用到图表组件的页面，配置 *.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 是配置项，定义了全景图的物料资源地址和渲染交互配置，一个典型的配置如下所示：
options = {
"image": "https://xxx.com/.../xxx.jpg",
"smallPlanet": 3000,
"config": {
"projectionType": "equirectangular"
}
};动态库属性列表
<panoviewer> 上支持的属性包括：
| 属性名称 | 类型 | 说明 |
|---|---|---|
| options | Object | 配置项 |
关键配置项说明
| 配置项名称 | 类型 | 说明 |
|---|---|---|
| image | Object/string | 投影模式对应的资源配置 |
| projectionType | string | 投影模式名称 |
| smallPlanet | number | 小行星动画时长，如果未设置则表示无动画 |
投影模式
动态库支持多种投影模式，包括球形、立方体、EAC、手机全景、分级分块，投影模式对应的名称如下表：
| 投影模式 | 名称 |
|---|---|
| 球形 | equirectangular |
| 立方体 | cubemap |
| EAC | cubestrip |
| 手机全景 | panorama |
| 分级分块 | multires |
除分级分块模式外，其他模式的 image 字段为资源 url，分级分块模式的 image 参数是切片脚本生成的配置，说明如下：
| 配置项名称 | 类型 | 说明 |
|---|---|---|
| basePath | string | 分块图的根目录 |
| path | string | 分块图的格式化方式 |
| fallbackPath | string | 缩略图路径 |
| extension | string | 图像格式 |
| tileResolution | string | 分块 size |
| maxLevel | number | 最大级别 |
| cubeResolution | number | 立方体单面 size |
示例配置如下：
{
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"
}
}