open-index/open-npm huggingface dataset:
npm package: @mas.io/mas-vr-navigation
Description: ```bash tnpm install --save @alipay/mas-vr-navigation ```
Latest version: 0.6.1

# 安装
```bash
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 | --




# 在小程序中使用
```json
{
  "usingComponents": {
    "mas-vr-navigation": "@alipay/mas-vr-navigation/es/index"
  }
}
```

在 page.axml 中引用组件

```html
<!-- 页面使用方式 -->
 <mas-vr-navigation
    src="{{src}}"
    scene="{{scene}}"
    sceneNodesMap="{{sceneNodesMap}}"
    onFail="onFail"
    onNodeTap="onNodeTap"
    ballId="{{ballId}}"
    onDetectDestination="onDetectDestination"
    destinationId="pPlane_door2"
  />
```


```js
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

[![TNPM version][tnpm-image]][tnpm-url]
[![TNPM downloads][tnpm-downloads-image]][tnpm-url]
[![install size][install-size-image]][install-size-url]

[tnpm-image]: https://npm.alibaba-inc.com/badge/v/@alipay/mas-vr-navigation.svg
[tnpm-url]: https://npm.alibaba-inc.com/package/@alipay/mas-vr-navigation
[tnpm-downloads-image]: https://npm.alibaba-inc.com/badge/d/@alipay/mas-vr-navigation.svg

--------------------