@mas.io/mas-vr-navigation
v0.6.1
Published
```bash tnpm install --save @alipay/mas-vr-navigation ```
Downloads
7
Readme
安装
tnpm install --save @alipay/mas-vr-navigation
组件介绍
vr 全景球
参数说明
属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: src | 是 | string | 资源包地址可为 url,也可为本地路径 | --- | -- ballId | 是 | string | 全景球素材 | --- | root scene | 是 | string | 场景名称 | --- | -- sceneNodesMap | 是 | object | 场景对应表 | --- | -- destinationId | 否 | string | 目的地素材 | --- | -- onDetectDestination | 否 | function | 目的地偏离检测 | --- | -- visibleWhenTapMap | 否 | object | 点击可见素材表 | --- | -- animationNodesMap | 否 | object | 动画素材表 | --- | -- checkInterval | 否 | number | 检测全景球是否在运行间隔 | 100 | -- checkTime | 否 | number | 检测全景球是否在运行时间 | 2000 | -- normalInterval | 否 | number | 启动之后的检测间隔 | 5000 | -- headingLength | 否 | number | 检测定位的次数 | 5 | -- iosVersion | 否 | string | 兼容的ios版本 | 10.2.3 | -- androidVersion | 否 | string | 兼容的android版本 | 10.2.6 | -- swipeDegress | 否 | number | 滑动角度 | 10 | -- offsetDegress | 否 | number | 偏离角度 | 30 | -- destinationInterval | 否 | number | 目的地检测间隔 | 1500 | -- visibleWhenTapInterval | 否 | number | 点击可见素材间隔 | 3000 | -- animationInterval | 否 | number | 动画间隔 | 100 | --
在小程序中使用
{
"usingComponents": {
"mas-vr-navigation": "@alipay/mas-vr-navigation/es/index"
}
}
在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-vr-navigation
src="{{src}}"
scene="{{scene}}"
sceneNodesMap="{{sceneNodesMap}}"
onFail="onFail"
onNodeTap="onNodeTap"
ballId="{{ballId}}"
onDetectDestination="onDetectDestination"
destinationId="pPlane_door2"
/>
Page({
data: {
ballId: 'root',
src: 'https://gw.alipayobjects.com/os/bmw-prod/273ae6c3-8b04-4f7e-bdc5-6224d923142a.dat',
scene: 'a',
sceneNodesMap: {
a: ['pPlane_door2'],
b: ['pPlane_door3', 'pPlane_door4', 'pPlane_door2'],
c: ['pPlane_door4'],
d: ['pPlane_door5'],
},
},
onLoad() {},
changeSrc() {
this.setData({
src: `https://gw.alipayobjects.com/os/bmw-prod/273ae6c3-8b04-4f7e-bdc5-6224d923142a.dat?a=123${Math.random()}`,
});
},
changeScene(e) {
my.alert({
content: e.target.dataset.scene,
});
this.setData({
scene: e.target.dataset.scene,
});
},
onFail(e) {
my.alert({
content: `失败${e.type}`,
});
},
onNodeTap(e) {
my.alert({
content: e.nodeId,
});
},
onDetectDestination(e) {
// e.direction 为当前偏离方向,值为1(目的地没有偏离), 4(目的地在右侧),8(目的地在左侧),2(需要转身)
this.setData({
direction: e.direction,
})
}
});
Badges
[![install size][install-size-image]][install-size-url]