Vr-navigation NPM

安装

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,
    })
  }
});