最近，我整理了微信小程序 AR 相关的技术与案例，结合 XR-Frame、VisionKit 和 Three.js，把它们做成了一个小程序——小火枫数智。
做这件事，一方面是为了把零散的学习与实践整理起来，方便宣讲和技术分享；另一方面，也希望通过可以直接操作的案例，让大家了解：微信小程序里的 AR 能做什么，以及它的能力边界在哪里。
扫描一张图片，让三维角色出现在眼前；把一辆车放到桌面上，换色、打开车门；给自己戴一副虚拟面具；或者和朋友在实景棋盘上下一局暗棋。这些体验，都可以作为理解小程序 AR 的起点。
先看一段「YU7 空间车展」实机演示：从扫描平面、预览放置，到换色与车门开合。
一、小程序里可以玩些什么？
我把内容分成了“趣味互动”和“能力探索”两条线：前者先体验玩法，后者再观察玩法背后的技术。部分场景还提供了实机预览，方便先看看效果。
图 1：小程序中 AR 相关内容的组织方式，按本文阅读需要归类。
把车展放到桌面上
在“YU7 空间车展”里，可以扫描桌面或地面，选择位置放置车辆模型，再多角度查看，体验换色、车门开合和灯光切换。
“炼星工坊”则把桌面展示变成了互动：放置星球后，可以旋转、缩放、揉捏，观察不同材质与聚散效果。
两者都在回答一个问题：虚拟内容怎样与现实中的位置建立联系？
让图片成为三维内容的入口
对准预先准备的卡片或图片，显示对应模型，是比较容易理解的一类 AR。
我也保留了不同的展示方式：一种在跟踪有效时让模型随图片移动；另一种把图片作为触发条件，识别成功后继续展示内容。移动或移走图片，就能直观看到两者的区别。
让模型跟随人脸和动作
面具与眼镜试戴关注的是模型如何随头部姿态变化。人手、人体和手势示例，则可以观察关键点、姿态或手势分类结果。
这些结果可以用来驱动模型，也可以成为交互条件。要把试戴做自然，还需要处理模型适配、抖动、跟踪丢失和遮挡。
在真实画面里加入玩法
“幻光飞碟”需要转动手机寻找目标并点击射击；“山河暗棋”和“新春金雨”增加了同伴参与、房间和状态同步。
目前多人玩法需要连接同一 Wi-Fi／同一路由器。它们把 AR 的视觉呈现与游戏规则结合起来，让体验从“看一个模型”延伸到“共同参与”。
此外，小程序里还整理了毛玻璃、滑动雕冰等渲染案例，用来探索实时相机画面、材质和触摸反馈。渲染效果与空间定位可以结合，也可以分别研究。
两段多人互动实录也可以直接查看：
二、技术框架：跟踪定位与三维渲染怎样配合？
理解 AR，可以先看两部分：跟踪与定位提供空间信息，渲染把虚拟内容呈现出来。
在小程序里，XR-Frame、VisionKit 和 Three.js 承担着不同职责。按项目中的实现路线，可以整理成下面的关系：
图 2：本文整理的技术分工图。两条路线是不同场景的实现选择，不表示需要同时创建两套相机会话。
XR-Frame：把场景与 AR 能力组织起来
XR-Frame 是微信小程序的 XR／三维场景开发框架。可以用组件组织相机、模型、灯光和跟踪节点，再通过脚本控制交互。
从开发角度看，它既提供 AR 场景的接入方式，也提供三维内容的组织和渲染能力：
| 方向 | 主要内容 | 可以用来做什么 |
|---|---|---|
| 场景与相机 | 节点层级、变换与相机 | 模型摆放、视角与场景组织 |
| 模型与动画 | glTF／GLB、模型动画与关键帧 | 角色动作、产品动态演示 |
| 材质与光照 | PBR 材质、纹理、灯光与环境数据 | 表现不同表面质感 |
| 效果与扩展 | 粒子、后处理、自定义几何和 Effect | 氛围效果与定制表现 |
这些方向可以在XR-Frame 示例仓库中找到对应案例；资源格式、扩展支持与功能版本仍需分别确认。
VisionKit：提供相机与跟踪信息
VisionKit 提供相关相机、跟踪与定位接口，XR-Frame 的 AR 系统会对接这些能力。
例如，图片跟踪提供目标姿态，平面场景提供定位与放置所需的信息，人脸相关能力提供关键点或姿态。业务代码再决定把模型放在哪里，以及怎样响应结果。
微信的官方平面＋Marker 示例展示了会话、锚点事件与三维场景衔接的实现方式。
Three.js：处理自定义渲染
项目中的部分效果采用 VisionKit＋Three.js 实现，方便直接组织几何、材质和绘制流程。
这条路线需要自行处理相机同步、背景合成、绘制状态及资源释放。微信提供了Three.js 小程序适配版本，但浏览器示例通常仍需适配小程序环境。
三、能力框架：从技术能力到使用场景
从使用场景看，这些能力可以用于图片互动、空间展示、人体交互，以及结合规则的游戏体验：
图 3：基于能力整理的应用方向，部分方向是可以继续探索的场景。
设计方案时，尤其需要区分三件事：
第一，识别与跟踪。 识别关注找到了什么目标，持续跟踪还要更新它的位置和姿态。即使都从“扫图”开始，后续行为也可能不同。
第二，3DOF 与空间定位。 3DOF 主要响应手机旋转，适合转动视角查看内容；需要走近、退后或绕行观看的场景，还要处理手机的平移与空间关系。
第三，多人状态与共享空间。 两台手机看到相同棋局，说明业务状态同步了；要让棋盘在现实空间中精确重合，还需要另外解决空间对齐问题。
这些区别决定了体验应该怎样设计，也决定了需要选择哪些接口。
四、小程序 AR 有哪些限制？
机型与版本需要单独确认
支持情况受到手机硬件、操作系统、微信版本、基础库和具体算法配置的共同影响。
项目会通过 wx.isVKSupport('v1')／wx.isVKSupport('v2') 做预检，但预检通过后，还要完成权限授权、会话初始化与实际跟踪。预检通过，也不代表具体场景一定能正常运行。
算法能力不能任意叠加
有图片、人脸、平面等能力，不代表能在同一会话中任意组合。
例如，官方提供了 V2 平面＋Marker 的组合示例；其他组合仍要核对对应接口与版本。XR-Frame 的场景模式与直接使用 VisionKit 的会话配置，也不能简单互相套用。
对于需要多种跟踪结果协同的方案，应先验证关键组合，再设计完整交互流程。
放置模型不等于理解整个环境
检测到平面并放置模型，不会自动获得完整房间重建、任意真实物体遮挡、跨会话持久锚点或多人共享地图。
项目中用脸模辅助眼镜遮挡，与获取整个真实环境的深度，也属于不同实现。
光照不足、纹理较少、目标出画或快速移动，都可能影响跟踪，需要相应的恢复提示与重新定位入口。
效果需要和性能一起设计
模型复杂度、贴图、透明混合、粒子与后处理，都会增加设备负担。远程加载模型能减少随包资源，但仍要考虑下载等待、缓存和运行内存。
项目采用按需加载、资源复用和退出清理等方式控制开销。具体画面、帧率与长时间运行表现，仍需在目标手机上验证。
这里介绍的是已经整理到项目中的能力与案例，各场景的开放和验证情况以实际版本为准。浏览器渲染检查、逻辑测试与微信真机验证，也各自覆盖不同的问题。
五、欢迎亲手试一试
如果第一次接触小程序 AR，可以先从空间车展或幻光飞碟开始，观察手机旋转、移动与模型画面的关系；再试试图片跟踪、面具试戴，最后邀请同伴体验多人互动。
亲手移动手机、转动识别图或和同伴完成一次操作，比静态截图更容易理解这些体验的区别。
后续我会继续拆解这些案例的细节，单独讲讲其中的原理与实现。 比如，图片识别后模型怎样跟随，桌面上的模型怎样定位，人脸试戴怎样处理抖动与遮挡，以及多人场景怎样同步状态。每篇围绕一个具体问题展开，分享实现思路、关键代码和踩坑过程。
欢迎体验「小火枫数智」，也欢迎交流你想在微信小程序里实现的 AR 场景。
用微信扫一扫，打开小程序体验。多人玩法请连接同一 Wi-Fi／同一路由器。
