• spintileviewer VR 3D 环物 -beta
  • 使用方法
    • 1. 在项目中引用动态库
    • 2. 在使用到组件的页面配置动态库
    • 3. 编写*.swan文件
  • 动态库属性列表
    • 关键配置项说明

spintileviewer VR 3D 环物 -beta

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

使用方法

1. 在项目中引用动态库

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

• JSON

 


  
"dynamicLib": {

  
 "myDynamicLib": {

  
 "provider": "spintileviewer"

  
 }

  
},

 

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

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

• JSON

 


  
{

  
 "usingSwanComponents": {

  
 "spintileviewer": "dynamicLib://myDynamicLib/spintileviewer"

  
 }

  
}

 

3. 编写*.swan文件

• SWAN

 


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

 

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

• JS

 


  
const options = ...;

  


  
Page({

  
 data: {

  
 options: options

  
 }

  
});

 

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

• JS

 


  
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 规则。使用方法如下：

• SWAN

 


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

 

参考配置文件。

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

• JS

 


  
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>上支持的属性包括：

关键配置项说明