MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能(含源码)

前言

之前制作了基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能的demo,使用了在线的图像目标编译器对识别图进行了编译,并实现了自制的WebAR效果,大致效果如下:

但是在线的编译器在操作中也不是很方便,我想个人部署一个本地的图像目标编译器,这样自己使用起来还是比较的方便快捷,而且该项目的源码中也提供了相应的例子,我在这个案例基础上进行了汉化和修改,即可得到本地版本的图像目标编译器。同时该网页提供了单目标图生成、多目标图生成、生成进度展示、删除识别图和下载识别图等功能。

环境安装

需要node.js环境,下载代码仓库和执行构建等操作,这些个的步骤在前言中提到的博客中已经有介绍,这里就不重复的介绍了。

编码&汉化

这里在代码仓库的mind-ar-js-master\examples\image-tracking\compile.html的基础上进行了修改,主要对其介绍文字进行了汉化:

  <body>
    <div>
      <p>使用方法:p>
      <ol>
        <li>将目标图像(例如.png)放入放置区域(可放置多个(多图追踪))。li>
        <li>单击“开始生成”,可能需要等待一段时间(特别是对于大图片可能会更久)。li>
        <li>完成后,会显示一些生成图片,您可以预览带特征点的识别图。li>
        <li>点击“下载文件”获取图片检测的mind文件,这可以用于WebAR的开发。li>
      ol>
    div>
    <button id="startButton">开始生成button>
    <button id="downloadButton">下载文件button>
    <span id="progress">span>
    <div id="dropzone" class="dropzone">div>
    <div id="container">
    div>
  body>

同时,这个网页还使用了dropzone插件,将托管在云上的dropzone.min.js 和 dropzone.min.css 下载放置本地即可(别忘了修改相对位置)。

功能展示

汉化后的使用说明:
使用方法:
1.将目标图像(例如.png)放入放置区域(可放置多个(多图追踪))。
2.单击“开始生成”,可能需要等待一段时间(特别是对于大图片可能会更久)。
3.完成后,会显示一些生成图片,您可以预览带特征点的识别图。
4.点击“下载文件”获取图片检测的mind文件,这可以用于WebAR的开发。

单目标图生成:
MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能(含源码)_第1张图片

多目标图生成:

删除识别图:
MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能(含源码)_第2张图片

下载识别图:

MindAR的网页端WebAR图片识别功能的图片目标编译器中文离线版本功能(含源码)_第3张图片

源码

https://download.csdn.net/download/qq_33789001/87542299

你可能感兴趣的:(Web,WebAR识别图制作,WebAR图标编辑器,WebAR离线编译,WebAR源码,WebXR)