基于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基础库最低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"