微信小程序xr-frame实现识别手势显示星星模型

1.需要的文档:AR追踪器 | 微信开放文档 (qq.com)

2.用到的组件:xr-frame 

3.基础知识：

了解基本手势编码:

• 

  图片来源:微信开放文档（ AR追踪器 | 微信开放文档 (qq.com)

了解基础标签:

1.xr-scene 场景
<xr-scene ar-system="modes:Hand" bind:ready="handleReady" bind:tick="handleTick" />
.scene:包含了需要参与渲染的所有物体、灯光、照相机等，相当于根节点
.ar-system="modes:Hand"表示AR系统默认是关闭的，开启它需要在场景元素Scene上挂载ARSystem即可
.modes：模式
.Hand：手部识别模式
2.xr-assets 资源
  <xr-assets bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="cool-star" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/cool-star.glb" />
  </xr-assets> 
3.xr-asset-material 材质
<xr-asset-load type="gltf" asset-id="cool-star" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/cool-star.glb" />
4.xr-camera 相机 
<xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera /> 
.background属性，值为ar 
.is-ar-camera 开始ar效果
5.xr-light 光照
  <xr-light type="ambient" color="1 1 1" intensity="1" />
  <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />
6.xr-ar-tracker 追踪状态
.AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。其一版本代理到元素XRARTracker，对应在xml中的标签是xr-ar-tracker。
.mode="Hand"模式与scene ar-system="modes:Hand" 一致
 <xr-ar-tracker id="tracker" mode="Hand" auto-sync="4">
    <xr-gltf model="cool-star" anim-autoplay />
  </xr-ar-tracker>

注明:详见https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/ar/tracker.html#Hand

 需要的模型:星星模型(注明:来源于微信开放文档)

 整体代码:

<xr-scene ar-system="modes:Hand" bind:ready="handleReady" bind:tick="handleTick">
  <xr-assets bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="cool-star" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/cool-star.glb" />
  </xr-assets>

  <xr-env env-data="xr-frame-team-workspace-day" />
  <xr-light type="ambient" color="1 1 1" intensity="1" />
  <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />

  <xr-ar-tracker id="tracker" mode="Hand" auto-sync="9">
    <xr-gltf model="cool-star" anim-autoplay />
  </xr-ar-tracker>

  <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera />
</xr-scene>