安装

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]