微信小程序最新大招——xr-frame尝鲜，AR

xrframe对ar的利用停止了很是多的简化，只需要简单的几步便可以开辟一个带有ar才能的小法式，而且还能支持图像、手势、平面识别等ar中常用的AI才能。
demo结果以下：



平面识别



自界说marker识别



人脸识别



手势识别



躯体识别

本文为系列文章，倡议没看过根本讲授的同学先看看：微信小法式最新大招——xr-frame尝鲜，根本图形讲授
全文目录：微信小法式最新大招——xr-frame尝鲜
本文讲授demo：AR案例：
官方给出的代码示例大同小异，这里同一讲授，对应官方小法式（名字：小法式示例）的交互动画/xrframe/gltf案例，代码为：
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-basic
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-camera
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-2dmarker
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-osdmarker
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-face
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-hand
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/components/xr-ar-body

以下讲授实现计划：
1.在实在天下上衬着：
1).在xr-scene标签上增加ar-system属性，值为camera:Back：

1. <xr-scene ar-system="camera:Back">

复制代码

camera暗示利用手机的前置（Front）还是后置（Back，默许）摄像头
2).在xr-camera标签增加background属性，值为ar：

1. <xr-camera ... background="ar"/>

复制代码

这样camera在衬着布景时就会利用手机摄像头拍摄到的图像：
demo结果以下：中心的桌子是个gltf节点，场景布景是摄像头拍到的实在天下



2.利用AI才能：
在实在天下上衬着只是ar的最根本一步，想要做出风趣的ar小法式，还需要借助AI的识别才能，识别实在天下中的物体并与之交互，今朝xr-frame供给了一些间接可用的AI识别才能：
1).平面识别：
可以按照摄像头拍摄到的实在天下，识别出桌面、空中等平面，并可以将一个元素放在这个平面上，元素会按照手机的移动在平面上移动，并连结近大远小的结果
demo结果以下：


实现方式：
在xr-scene标签的ar-system属性中，增加modes:Plane

1. <xr-scene ar-system="modes:Plane">

复制代码

以后利用xr-ar-tracker标签，声明mode为Plane，子节点为需要在平面上移动的元素

1. <xr-ar-tracker mode="Plane">
2.   <xr-gltf model="anchor"></xr-gltf>
3. </xr-ar-tracker>

复制代码

最初在xr-camera上增加is-ar-camera属性，此时相机的各参数将由AR系统自动控制

1. <xr-camera ... background="ar" is-ar-camera>

复制代码

留意：增加is-ar-camera后不能用js点窜相机的属性，否则会和系统的控制抵触
xr-frame还供给了两个方式，供开辟更多交互才能：

1. scene.ar.placeHere(nodeId | element, switchVisible)
2. scene.ar.resetPlane();

复制代码

placeHere将一个元素放到平面上，随着摄像头移动（如进步或前进），元素会相对牢固在平面的放置位置
resetPlane将放置的元素断根

2).2D Marker、OSD Marker：
Marker是事前给出的一个识别物（比如苹果），在识别到一个marker时，实时计较出这个marker的位置，这样便可以按照该位置来衬着元素，从而与实在天下同步，如：在苹果上衬着两个眼睛，摄像头移动时，眼睛始终在苹果上
2D Marker与OSD Marker的区分在于两者利用的识别算法纷歧样，2D Marker在marker扭转的时辰，衬着的元素也会随着扭转，但OSD Marker则不会扭转
demo结果以下：我拍了一张我杯盖的照片，再去识别杯盖


实现方式：
在xr-scene的ar-system上设备modes:Marker或OSD

1. <xr-scene ar-system="modes:Marker">

复制代码

利用xr-ar-tracker，声明mode为Marker或OSD，并传入marker图片的地址

1. <xr-ar-tracker mode="Marker" src="***.png">
2.   <xr-gltf model="gltf" .../>
3. </xr-ar-tracker>

复制代码

src可以传入绝对途径，也可以传入姑且文件途径（wx.chooseMedia的回调）
子元素（就是demo上的三个蝴蝶）是以marker位置为基准来偏移的
留意，camera元素仍然要有background="ar"和is-ar-camera属性

3).人脸、手势、躯体识别
人脸、手势、躯体的识别方式都是按照特征点来识此外，下面以人脸为例说明
xr-frame会识别出人脸的上百个特征点，经过这些特征点，可以判定人脸的位置、五官的位置甚至是脸色等微观细节
以下是一个特征点的示例：


我们可以将元素绑定到某个特征点上，在特征点移动时元素将会随着移动：

1. <xr-ar-tracker mode="Face" auto-sync="-1 105 104 45 98">
2.   <xr-node name="face"><xr-mesh .../></xr-node>
3.   <xr-node name="eyeL"><xr-mesh .../></xr-node>
4.   <xr-node name="eyeR"><xr-mesh .../></xr-node>
5.   <xr-node name="nose"><xr-mesh .../></xr-node>
6.   <xr-node name="mouth"><xr-mesh .../></xr-node>
7. </xr-ar-tracker>

复制代码

xr-ar-tracker的mode需要为Face，auto-sync代表了其子元素应当绑定到哪个特征点上，-1暗示不绑定，如第二个元素eyeL会被绑定在105特征点上，位置大致在左眼，结果以下：


3.编程接口
除此之外，xrframe还供给了接口来方便开辟更多交互功用：

1. const trackerEl = this.scene.getElementById('tracker');
2. const tracker = trackerEl.getComponent(xrSystem.ARTracker);
4. // 获得某特征点位置
5. // 第一个参数是特征点编好
6. // 第二个参数可选，传入一个Vector3，会将成果放入其中
7. // 第三个参数可选，返回的坐标否相对于`ARTracker`，false为返拒绝对坐标
8. const position = tracker.getPosition(98, new xrSystem.Vector3(), true);
10. // 获得手势姿势，详见官网
11. const gesture = tracker.gesture;
13. // 获得整体置信度
14. const score = tracker.score;

复制代码

4.tracker的状态
由于识别需要一定的时候，是以在实时度要求高的场景下，需要判定tracker的状态（已识别/识别中/失利）来停止编程
xr-ar-tracker标签支持两种事务：
1. ar-tracker-state： 状态改变时触发，事务回调的参数：ARTracker实例，包括了识别状态、毛病信息
2. ar-tracker-switch：简化的事务，只要识别到了和未识别到两种状态
绑定事务有两种方式，第一种是绑定到标签的属性

1. <xr-ar-tracker ... bind:ar-tracker-state="handleARTrackerState">

复制代码

第二种是在代码里绑定，留意这里需要在scene的ar-ready触发事务后绑定

1. <xr-scene ... bind:ar-ready="handleARReady">
3. handleARReady({detail}) {
4.   const tracker = this.scene.getElementById('ar-tracker').getComponent(xrFrameSystem.ARTracker);
5.   tracker.el.event.add('ar-tracker-state', tracker => {
6.     const {state, errorMessage} = tracker;
7.   });
8. }

复制代码