panoviewer 动态库-Beta

panoviewer 动态库提供了在小程序中播放全景图的方法,底层基于百度 webVR SDK Hydreigonpanoviewer 动态库-Beta - 图1 实现。

使用方法

1. 在项目中引用动态库

使用动态库的方法参见小程序文档:使用动态库panoviewer 动态库-Beta - 图2,在 app.json 中增添一项 dynamicLib,与 pages 同级。

  1. "dynamicLib": {
  2. "myDynamicLib": {
  3. "provider": "panoviewer"
  4. }
  5. },

2. 在使用到组件的页面配置动态库

在每个使用到图表组件的页面,配置 *.json 文件如:

  1. {
  2. "usingSwanComponents": {
  3. "panoviewer": "dynamicLib://myDynamicLib/panoviewer"
  4. }
  5. }

3. 编写 *.swan 文件

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

这是一种最基本的配置方式。style 也可以在 .css 中声明,需要保证 <panoviewer> 是有宽度和高度的。options.js 中绑定到页面的 data 中:

  1. const options = ...;
  2. Page({
  3. data: {
  4. options: options
  5. }
  6. });

其中,options 是配置项,定义了全景图的物料资源地址和渲染交互配置,一个典型的配置如下所示:

  1. options = {
  2. "image": "https://xxx.com/.../xxx.jpg",
  3. "smallPlanet": 3000,
  4. "config": {
  5. "projectionType": "equirectangular"
  6. }
  7. };

动态库属性列表

<panoviewer> 上支持的属性包括:

属性名称类型说明
optionsObject配置项

关键配置项说明

配置项名称类型说明
imageObject/string投影模式对应的资源配置
projectionTypestring投影模式名称
smallPlanetnumber小行星动画时长,如果未设置则表示无动画

投影模式

动态库支持多种投影模式,包括球形、立方体、EACpanoviewer 动态库-Beta - 图3、手机全景、分级分块,投影模式对应的名称如下表:

投影模式名称
球形equirectangular
立方体cubemap
EACcubestrip
手机全景panorama
分级分块multires

除分级分块模式外,其他模式的image字段为资源url,分级分块模式的image参数是切片脚本生成的配置,说明如下:

配置项名称类型说明
basePathstring分块图的根目录
pathstring分块图的格式化方式
fallbackPathstring缩略图路径
extensionstring图像格式
tileResolutionstring分块size
maxLevelnumber最大级别
cubeResolutionnumber立方体单面size

示例配置如下

  1. {
  2. image: {
  3. basePath:
  4. "https://hydreigon-publish.cdn.bcebos.com/swan-hydreigon/pano/lujiazui-4k/",
  5. path: "/%l/%s%y_%x",
  6. fallbackPath: "/fallback/%s",
  7. extension: "jpg",
  8. tileResolution: 512,
  9. maxLevel: 3,
  10. cubeResolution: 1304
  11. },
  12. config: {
  13. projectionType: "multires"
  14. }
  15. }