基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能（含源码）

十幺卜入

已于 2023-03-09 10:37:18 修改

阅读量2.7k

点赞数 3

分类专栏： Web 文章标签： WebAR源码 WebAR开发教程 WebAR识别 WebAR追踪 WebAR模型动作

于 2023-03-06 17:24:32 首次发布

本文链接：https://blog.csdn.net/qq_33789001/article/details/129366677

版权

Web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言

由于之前一直在做这个AR/VR 相关的功能开发，大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎的开发，这样开发的程序大部分都是运行在APP上，安卓或者ios的开发也能一次性搞定。不过当时大部分的需求都是需要在网页端的功能，特别在WX打开连接就能体验功能的需求很强烈。不过在这些功能鄙人还都没有实现过，而且跳槽后基本不再做文旅相关的开发，前几天在逛GitHub时发现了现在很火的开源库AR.js(4.4k星星),用于 Web 增强现实的轻量级库，具有图像跟踪、基于位置的 AR 和标记跟踪等功能（自行搜索查看）----于是整了体验一下，效果还是很不错，不过就在该库的介绍页中发现了更叼的、更出色的图像跟踪功能（也是多个图像跟踪）和面部跟踪（MindAR，GitHub站内1.5k星星），在经过了node.js和npm的数次捣鼓和安装操作后，终于制作出了一个自己的案例，在此将过程分享出来。

效果

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

跟随：
在这里插入图片描述

准备工作

大致流程是将github上的代码下载到本地，准备目标识别图，目标图像编译，准备模型等准备工作。

下载源码

本地如果安装了git工具可以直接git下来，这个我就不交了，没有的可以直接下载压缩包：

code > Download ZIP

下载完成的压缩包，进行解压后就获得了源码。

安装包体

这里需要node.js的环境（个人也是这么编译和操作的），具体自行进行搜索配置吧。Cmd切换到源码的根路径，安装关联的包体：

npm install

然后再进行执行构建操作:

npm run build dist

模型&目标图

由于本人也不太会建模和画画，就直接在网上找了现成的素材进行。

编译目标图

编译图的地址该项目的仓库地址有介绍，在说明文档的工具页，我也是直接使用在线的方式进行的，为了不外链就自己找一下吧。打开网页后会按提示可以将图片拖到对应的位置，就会上传识别图（按文档说的是可以多选图片，这样就可以实现多目标检测和跟踪的功能）。
过程如下图：
在这里插入图片描述

等待编译完成后会有一些大小不一可供选择的带特征点的识别图可供预览：
在这里插入图片描述

个人认为特征点越多识别精准度会越高（仅个人认为，需验证自行测试）。

点击下载后，将会得到一个targets.mind的文件，这个文件需要放到工程中，后续会使用到。

这个图片编译器我已经将其适配成离线版本：离线图片编译器

编写代码

需要快速上手，我也不从头进行编码了，直接在“mind-ar-js-master\examples\image-tracking、example1.html”的基础上进行了修改，然后完成自己的功能。
这里的主要修改了body中的内容，即替换了识别图、识别后的模型等。

<body>
 <div class="example-container">
 <a-scene mindar-image="imageTargetSrc: ./assets/card-example/card.mind; showStats: true;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
 <a-assets>
 <img id="card" src="./assets/card-example/card.png" />
 <a-asset-item id="avatarModel" src="./assets/card-example/softmind/scene.gltf"></a-asset-item>
 </a-assets>

 <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

 <a-entity mindar-image-target="targetIndex: 0">
 <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>

<a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel"
 animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" >
 </a-entity>
 </a-scene>
 </div>
 </body>

修改为：

<body>
<div class="example-container">
 <a-scene mindar-image="imageTargetSrc: ./ImgTarget/kfgirl.mind; showStats: true;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
 <a-assets>
 <img id="kfgirlimg" src="./ImgTarget/kfgirl.png" />
 <a-asset-item id="kfgirlmodel" src="./ImgTarget/scene.gltf"></a-asset-item>
 </a-assets>

 <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model rotation="0 0 0 " position="0 0.5 0" scale="0.005 0.005 0.005" src="#kfgirlmodel" animation-mixer></a-gltf-model>
 </a-entity>
 </a-scene>
</div>
</body>

这里的a-scene 的mindar-image = imageTargetSrc是识别目标的路径，其它属性感觉无关痛痒，暂时未研究。

a-assets是场景中的资源，图片和模型，我也是按案例中进行了id 和src的替换。

a-gltf-model是识别后的模型展示，src属性需要和a-assets中模型（a-asset-item）的id一致，同时rotation="0 0 0 " position=“0 0.5 0” scale=“0.005 0.005 0.005” 这些的赋值，主要是依次控制模型的旋转、位置、缩放属性，这些根据不同的模型进行设置；我这里删除了animation属性，不要了场景默认的动画。添加了animation-mixer 这个是控制模型自带动作的，不添加模型将没有对应的动作。

服务器设置

我这里直接使用了IIS作为了本地的服务器，在打开网页测试之前还需要进行MIME类型的添加：
.mind:
在这里插入图片描述

.bin
在这里插入图片描述

如果有其它的后缀名类型，需要自行添加上去，不然没办法运行网页或者功能不正常。

同时需要配置SSL证书（这个教程网上多，自行搜索配置吧）：
在这里插入图片描述

最后通过https://IP地址/网页进行访问。

源码

https://download.csdn.net/download/qq_33789001/87537647
（打不开说明暂未通过审核）

总结

这个摸索了几天弄出来的效果，在手机和电脑上都能顺利运行，但是不知什么原因感觉帧率是有点低，就像效果图上的显示一样，只有个位数的帧率，所以要用这个开发测试还需要进行充分的测试。还有部分脚本库是托管在了cdn服务器，直接调用会比较的慢，还有可能出现脚本库加载不成功的情况，如果直接使用仓库中的案例可能需要科学上网。