微信AR实现识别手部展示glb模型（带demo）

一只开心鸭！

已于 2024-07-31 15:02:22 修改

阅读量1.2k

点赞数 12

分类专栏：小程序文章标签：微信 ar notepad++

于 2024-01-22 09:57:24 首次发布

本文链接：https://blog.csdn.net/oneya1/article/details/135704601

版权

本文介绍了如何在微信小程序中实现AR手势识别，展示了通过微信开发者工具预览和运行的效果。代码示例包括使用官方文档的demo框架，以及在wxml、js、json文件中的具体实现，特别提到了手势识别的限制和如何改善识别稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：我的代码文件在资源里，有需要可自行下载，微信开发者工具直接运行到pages/ar/scene-ar-germanBusiness/index页面，进行手机预览可查看。项目记得改成自己的appid
在这里插入图片描述

1.效果
在这里插入图片描述

2.微信小程序手势识别只支持以下几个动作，和识别点位，官方文档
因为AR识别手部一直在识别，所以会出现闪动问题。可以将微信开发者调试基础库设置到3.3.2以上，可能要稳定一些
在这里插入图片描述
3.3.代码展示，我用的是微信官方文档案例demo框架。官方文档demo

4.代码展示，在组件里先创建xr-ar-german组件

index.wxml

<!-- 手势识别 -->
<xr-scene ar-system="modes:Hand" bind:ready="handleReady" bind:ar-ready="handleARReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  <!-- 模型 -->
    <!-- <xr-asset-load type="gltf" asset-id="miku2" src="模型"/> -->
    <xr-asset-load type="gltf" asset-id="miku2" src="glb模型"/>
   
  </xr-assets>
  <xr-env env-data="xr-frame-team-workspace-day