图像追踪、AR识别、AR.js应用

曦月合一

已于 2023-03-09 09:48:57 修改

阅读量1.2k

点赞数 1

分类专栏： jsp node.js javaScript 文章标签： javascript ar 前端

于 2023-03-08 14:24:49 首次发布

本文链接：https://blog.csdn.net/qq_39951524/article/details/129401525

版权

jsp 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javaScript

2 篇文章 0 订阅

订阅专栏

node.js

1 篇文章 0 订阅

订阅专栏

一、创建图片描述符

1.1 下载创建图片描述符的项目demo链接

https://download.csdn.net/download/qq_39951524/87545994?spm=1001.2014.3001.5503

1.2 下载好后，存储到D盘，或其他盘里

   ** 注意：**  把你想要的图片放到项目的目录里。

1.3 安装依赖 node.js 在cmd中执行操作命令

       node app.js -i <path-to-the-img/image-name.jpg/png>

1.4 具体执行流程为下图

在这里插入图片描述

1.5 在这之后，您将在新生成的output文件夹中找到图像描述符文件

您都将得到三个文件作为图像描述符，分别是.fset、.fset3和.iset。它们在文件扩展名之前都有相同的前缀。在这里插入图片描述
在output文件中您将得到三个文件作为图像描述符，分别是.fset、.fset3和.iset。它们在文件扩展名之前都有相同的前缀。例如：ming.fset 、ming.fset3、 ming.iset三个文件都是由ming.jpg生成。

注意：普通格式的图片，AR.js并不能进行识别追踪，因此才需要需要对图片进行处理。

二、页面内容渲染

<!--导入 a-frame 然后导入带有图像追踪和/定位功能的 ar.js-->
<script src="${pageContext.request.contextPath }/statics/js/AR/three.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/stats.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/ar.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/aframe-master.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/aframe-ar-nft.js"></script>
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!--在图像描述符加载前显示 loading，根据设备的计算力，加载可能需要一点时间。-->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>

  <!-- a-frame scene -->
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- a-nft是定义图像跟踪实体的锚点 -->
    <!-- 在 url 使用到图像描述符的路径之前创建 -->
    <!-- 路径应该以名称结束，无需扩展名。举例来说，如果文件是“ming.fset”那么路径的结尾单次就是“ming” -->
    <!--path-to-your-image-descriptors:代表图像描述符的路径-->
    <a-nft
      type="nft"
      url="<path-to-your-image-descriptors>"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
        <!-- 作为 a-nft 的子元素，您可以定义要显示的内容。下面是一个 GLTF 模型实体 -->
          <!--path-to-your-model:代表扫描图片显示您的模型的路径-->
        <a-entity
            gltf-model="<path-to-your-model>"
            scale="5 5 5"
            gesture-handler="minScale: 0.25; maxScale: 10" 
            position="100 150 -200" 
            rotation="-90 0 0"
        >
        </a-entity>
    </a-nft>
    <!-- 静态摄像机，根据设备的运动参数进行移动 -->
    <a-entity camera></a-entity>
  </a-scene>
</body>

三、项目部署

切记：手机浏览器打开摄像头需要https协议（必须）

1. 项目放在服务器上部署，html里的文件路径可能需要自行调整。
2. 打开index.html，允许访问摄像头，等待模型加载（加载完成黑屏会消失）。
3. 打开项目里的图片，摄像头对准图片，在画面中调整适中的图片大小，模型就会显示出来。

四、安装需要的插件

4.1 插件aframe-master.min.js、插件aframe-ar-nft.js、three.min.js、stats.min.js、ar.js 集合链接

https://download.csdn.net/download/qq_39951524/87545984?spm=1001.2014.3001.5503

曦月合一

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
图像追踪、AR识别、AR.js应用

图像追踪、AR识别、AR.js应用、插件集合
复制链接

扫一扫

专栏目录

图像追踪、AR识别 、AR.js应用

一、创建图片描述符

1.1 下载创建图片描述符的项目demo链接

1.2 下载好后，存储到D盘，或其他盘里

1.3 安装依赖 node.js 在cmd中执行操作命令

1.4 具体执行流程为下图

1.5 在这之后，您将在新生成的output文件夹中找到图像描述符文件

二、页面内容渲染

三、项目部署

四、安装需要的插件

4.1 插件aframe-master.min.js、插件aframe-ar-nft.js、three.min.js、stats.min.js、ar.js 集合链接

图像追踪、AR识别、AR.js应用