本文主要是介绍基于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">畅游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-compdisable-scrollid="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识别成功})
}
在handleArStatusChange中可以根据识别状态的变更编写更细节的交互逻辑。
工程源码
https://download.csdn.net/download/qq_33789001/89665224
这篇关于基于xr-frame实现微信小程序的图片扫描识别AR功能(含源码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!