基于xr-frame实现微信小程序的图片扫描识别AR功能（含源码）

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定，发布为正式版，但仍有一些功能还在开发，目前（2024.08.24）有一些限制如下：1最低要求客户端iOS8.0.29、安卓8.0.30及以上，推荐稳定版在iOS8.0.36、安卓8.0.35及以上。2基础

十幺卜入

2466人浏览 · 2024-08-24 14:15:00

十幺卜入 · 2024-08-24 14:15:00 发布

前言

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定，发布为正式版，但仍有一些功能还在开发，目前（2024.08.24）有一些限制如下：

1最低要求客户端iOS8.0.29、安卓8.0.30及以上，推荐稳定版在iOS8.0.36、安卓8.0.35及以上。
2基础库最低2.27.1及以上，推荐2.32.0及以上。
3开发工具需要最新版本，建议Nightly版本。
4小程序全局同一时刻只能存在一个xr-frame组件，否则可能会发生异常。
5同一个xr-frame组件只能存在一个xr-scene，并且必须为顶层。
6目前不支持和小程序传统标签比如混写。
7目前不支持wxml自动补全，真机调试需要特别注意，见真机调试文档。

后续的展望：

1 XR-FRAME内置特色的UI组件，让开发者可以在XR-FRAME组件中写UI，来实现一套酷炫的UI系统。
2 AR/VR能力持续增强，支持眼睛设备。
3 交互手段进一步强化，物理碰撞、触发等功能（已完成，待发布）。
4 工具能力强化，包括标签属性自动补全等。

本文以该解决方案的官方demo为参考开发微信小程序的图片识别并叠加模型动作的功能，具体使用的是2D Marker识别模式，会将传入的 src (图片的网络/本地地址) 或是 image（image类型资源id，优先使用）作为特征，去识别出三维空间一个平面上的图像部分，继而进行追踪。这个技术现在已经十分成熟可靠。这里以一张蓝色蝴蝶的图片作为识别图片，识别后在识别图上叠加一个3D蝴蝶模型并播放动作。

效果

扫描中：
在这里插入图片描述

扫描识别结果：
在这里插入图片描述

硬广

自制3D版三维搭建俄罗斯方块WX小游戏，走过路过可以扫描支持。
在这里插入图片描述

三维的消除，地狱难度：
在这里插入图片描述

实现功能

由于该功能的较为稳定，所以基本是使用官方的微信小程序xr-frame系统的示例集中的“平面识别叠加Marker案例 ”(components/xr-ar-basic)修改而来,基本的代码都是沿用的，只不过修改了识别的展示，降云上的图片和模型资源用本地的素材替换。

素材准备

本demo较为简单计划只有两个界面，一个主界面和一个识别界面，主要就是一个主页背景（AI生成）、一个识别图和一个识别模型，资源如下：
在这里插入图片描述

主页搭建

主页的设计较为简单，一个背景图，附加一个标题，一个图片识别的按钮，点击后进入图片识别页面。

<!--pages/home/index.wxml-->
<view class="home-container">
  <image class="home-bg" src="../../assets/bgimg.png"/>
  <view class="title">畅游AR世界</view>
  <view class="btns">
    <navigator class="btn-nav" url="/pages/ar/index">
    <button class="btn green">AR识图</button>
  </navigator>
  </view>
</view>

在这里插入图片描述

识别组件

由于“目前不支持和小程序传统标签比如混写”的限制，所以识别的功能需要制作成组件放入到页面，识别的组件参考的是components/xr-ar-basic，其中wxml中修改了xr的资源加载如下：

  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="hudie" src="/assets/hudie.glb"/>
  </xr-assets>

这里就将glb的模型加载进入场景，类型是“gltf”模型，asset-id可以自定义编号，不过识别跟踪的时候需要绑定，src是资源的地址可以是远程或者本地地址，这里模型是放到assets文件夹下所以路径是/assets/hudie.glb。

创建AR追踪器实现如下：

<xr-ar-tracker  mode="Marker" data-id="hudie-img" src="/assets/hudie.png" bind:ar-tracker-switch="handleTrackerSwitch">
      <xr-gltf  model="hudie" rotation="0 -90 0" anim-autoplay scale="1.5 1.5 1.5" ></xr-gltf>
</xr-ar-tracker>

其中mode是ar在追踪的模式，这里是2D Marker识别模式，src指定了识别图的路径（可以是远程或者本地地址）；bind是绑定相关事件，这里是将追踪器状态切换事件绑定到handleTrackerSwitch函数处理。

追踪器的子节点是xr-gltf 即识别后的模型展示，model就是关联asset-id，rotation修改模型旋转值，scale修改模型缩放，这两个值可能需要多次调整才能达到需要的效果，还有position用于位置修改。anim-autoplay设置自动播放模型动画（有动画才生效）。

Json文件设定组件，并指定渲染为xr-frame渲染：

{
  "component": true,
  "usingComponents": {},
  "renderer": "xr-frame"
}

识别界面

上一步已经将ar图片识别的功能弄成了组件，在识别界面的搭建主要是组件的使用，这里先在json中引用组件：

{
  "usingComponents": {
    "xr-comp": "../../components/xr-image/index"
  },
  "navigationBarTitleText": "AR识图",
  "navigationBarBackgroundColor": "#1D1918",
  "navigationBarTextStyle": "white",
  "disableScroll": true
}

这里将xr-image组件引用为xr-comp标签，设置标题和页面不可滑动。

在wxml中插入xr-comp：

<view class="ar-page">
  <xr-comp
    disable-scroll
    id="main-frame"
    class="main-ar-frame"
    width="{{renderWidth}}"
    height="{{renderHeight}}"
    style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"
    bind:arTrackerState="handleArStatusChange"
  />
</view>

其中

bind:arTrackerState=“handleArStatusChange”

将ar追踪器的状态（arTrackerState）绑定到js中的handleArStatusChange函数：

  handleArStatusChange({detail}) {
    const {state, error} = detail;
    //console.log("handleArStatusChange status:" + state);
    this.setData({
      isScanning: state == 1, //是否在扫描中 1识别中， 2识别成功
   })
}