spintileviewer VR 3D 环物 -beta

spintileviewer 动态库提供了在小程序中播放 3D 环物的方法,底层基于百度 webVR SDK Hydreigon 实现。

使用方法

1. 在项目中引用动态库

使用动态库的方法参见使用动态库,在app.json中增添一项 dynamicLib,与pages同级。

  • JSON
  1. "dynamicLib": {
  2. "myDynamicLib": {
  3. "provider": "spintileviewer"
  4. }
  5. },

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

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

  • JSON
  1. {
  2. "usingSwanComponents": {
  3. "spintileviewer": "dynamicLib://myDynamicLib/spintileviewer"
  4. }
  5. }

3. 编写*.swan文件

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

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

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

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

  • JS
  1. options = {
  2. "spin": {
  3. "thumb": "https://xxx.com/.../thumb.jpg",
  4. "crossLongitude": false,
  5. "reversalY": true,
  6. "reversalX": true,
  7. "initColRow": [
  8. 0,
  9. 0
  10. ],
  11. "rowCount": 1,
  12. "colCount": 30,
  13. "imageUrl": [
  14. [
  15. "https://xxx.com/.../00.jpg"
  16. ]
  17. ],
  18. "scaleType": "inside"
  19. },
  20. "tile": {
  21. "scaleType": "inside",
  22. "width": 1350,
  23. "enableUrlCORSOrigin": true,
  24. "height": 1620,
  25. "tileSize": 254
  26. },
  27. "tileSources": [
  28. [
  29. "https://xxx.com/.../00_00_files/",
  30. ...
  31. ]
  32. ],
  33. "backgroundColor": "#565656",
  34. "initColRow": [
  35. 0,
  36. 0
  37. ]
  38. };

动态库也支持链接方式传递配置,如果是跨域访问,需要配置跨域访问 CORS 规则。使用方法如下:

  • SWAN
  1. <spintileviewer config="{{ config }}" style="width: 100%; height: 100%; display: block"></spintileviewer>

参考配置文件

动态库默认仅支持核心的 3D 环物渲染(多视角分级分块)和交互(拖拽缩放),也可以通过设置defaultui=true来显示默认的控件,支持 PC 和移动端的适配,支持功能包括:热点、缩放按钮、复位按钮、全屏按钮、二维码等,配置文件是在无 UI 配置项的基础上增加了相关字段,一个典型的有 UI 配置如下:

  • JS
  1. options = {
  2. "ver": 1,
  3. "scenes": [
  4. {
  5. "sceneName": "scene_01",
  6. "sceneType": "spin",
  7. "thumb": "https://xxx.com/.../thumb.jpg",
  8. "spinImages": [
  9. [
  10. "https://xxx.com/.../00.jpg"
  11. ]
  12. ],
  13. "tileSources": [
  14. [
  15. "https://xxx.com/.../00_00_files/",
  16. ...
  17. ]
  18. ],
  19. "colCount": 32,
  20. "rowCount": 1,
  21. "initColRow": [
  22. 0,
  23. 0
  24. ],
  25. "scaleType": "inside",
  26. "tileSize": 254,
  27. "minLevel": 9,
  28. "width": 8256,
  29. "height": 5504
  30. }
  31. ],
  32. "hotspotsInfo": [
  33. {
  34. "className": "info",
  35. "id": "adsasasd",
  36. "popup": {
  37. "describe": "正文显示,纯正文情况。测试测试测试测试测试测试测试测试",
  38. "img": "",
  39. "title": "超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb",
  40. "href": "https://www.baidu.com"
  41. },
  42. "tip": "车头561564126514651653165"
  43. },
  44. ...
  45. ],
  46. "hotspotsPos": {
  47. "scene_01": {
  48. "00_00": [
  49. {
  50. "id": "adsa55sasd",
  51. "x": 0.65,
  52. "y": 0.2
  53. },
  54. ...
  55. }
  56. },
  57. "guideListFilter": "global",
  58. "guideList": [
  59. {
  60. "scene": "scene_01",
  61. "view": "01_00",
  62. "id": "adsasasd"
  63. },
  64. ...
  65. ]
  66. }

参考含 UI 配置文件

动态库属性列表

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

属性名称类型说明
optionsObject配置项
configString配置项链接
defaultuiBoolean是否显示默认控件

关键配置项说明

配置项名称类型说明
thumbString缩略图 url
spinImagesArray环视图 url 二维数组,第一维表示行,第二维表示列
tileSourcesArray分块图目录 url 二维数组,第一维表示行,第二维表示列
colCountNumber列数
rowCountNumber行数
initColRowArray初始视角
scaleTypeString图像适配类型。inside:留白,crop:裁切
tileSizeNumber分块 size
widthNumber图像原始宽
heightNumber图像原始高