百度智能小程序 VR 3D 环物-beta

2020-08-28 15:52 更新

spintileviewer VR 3D 环物—beta

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

使用方法

1. 在项目中引用动态库

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

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

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

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

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

3. 编写 *.swan 文件

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

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

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

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

options = {
    "spin": {
        "thumb": "https://xxx.com/.../thumb.jpg",
        "crossLongitude": false,
        "reversalY": true,
        "reversalX": true,
        "initColRow": [
            0,
            0
        ],
        "rowCount": 1,
        "colCount": 30,
        "imageUrl": [
            [
                "https://xxx.com/.../00.jpg"
            ]
        ],
        "scaleType": "inside"
    },
    "tile": {
        "scaleType": "inside",
        "width": 1350,
        "enableUrlCORSOrigin": true,
        "height": 1620,
        "tileSize": 254
    },
    "tileSources": [
        [
            "https://xxx.com/.../00_00_files/",
            ...
        ]
    ],

    "backgroundColor": "#565656",
    "initColRow": [
        0,
        0
    ]
};

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

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

参考配置文件 url:https://hydreigon-dev.cdn.bcebos.com/demo/assets/panamera_256/external/closed/config.json

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

options = {
  "ver": 1,
  "scenes": [
    {
      "sceneName": "scene_01",
      "sceneType": "spin",
      "thumb": "https://xxx.com/.../thumb.jpg",
      "spinImages": [
        [
          "https://xxx.com/.../00.jpg"
        ]
      ],
      "tileSources": [
        [
          "https://xxx.com/.../00_00_files/",
          ...
        ]
      ],
      "colCount": 32,
      "rowCount": 1,
      "initColRow": [
        0,
        0
      ],
      "scaleType": "inside",
      "tileSize": 254,
      "minLevel": 9,
      "width": 8256,
      "height": 5504
    }
  ],
  "hotspotsInfo": [
    {
      "className": "info",
      "id": "adsasasd",
      "popup": {
        "describe": "正文显示,纯正文情况。测试测试测试测试测试测试测试测试",
        "img": "",
        "title": "超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb",
        "href": "https://www.baidu.com"
      },
      "tip": "车头561564126514651653165"
    },
    ...
  ],
  "hotspotsPos": {
    "scene_01": {
      "00_00": [
        {
          "id": "adsa55sasd",
          "x": 0.65,
          "y": 0.2
        },
        ...
    }
  },
  "guideListFilter": "global",
  "guideList": [
    {
      "scene": "scene_01",
      "view": "01_00",
      "id": "adsasasd"
    },
    ...
  ]
}

参考含 UI 配置文件

动态库属性列表

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

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

关键配置项说明

配置项名称类型说明
thumbstring缩略图 url
spinImagesarray环视图 url 二维数组,第一维表示行,第二维表示列
tileSourcesarray分块图目录 url 二维数组,第一维表示行,第二维表示列
colCountnumber列数
rowCountnumber行数
initColRowarray初始视角
scaleTypestring图像适配类型,inside 表示留白,crop 表示裁切
tileSizenumber分块 size
widthnumber图像原始宽
heightnumber图像原始高


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号