使用AR.js打造WebAR入门课程（二）——基于图像标记，自行替换图像及模型

最新推荐文章于 2024-06-11 09:43:42 发布

胡晓天o0

最新推荐文章于 2024-06-11 09:43:42 发布

阅读量1.5k

点赞数 3

分类专栏：前端笔记 ar.js 文章标签： ar webwr ar.js 前端

本文链接：https://blog.csdn.net/qq_24127447/article/details/115750035

版权

前端笔记同时被 2 个专栏收录

6 篇文章 2 订阅

订阅专栏

ar.js

5 篇文章 11 订阅

订阅专栏

本文档详细介绍了如何使用AR.js库替换自定义模型和图像标记。首先，展示了官方示例代码，并解释了关键部分，如和标签的用途。接着，强调了模型和图像的要求，模型替换只需更改模型地址，而图像替换则需要通过NFT Marker Creator训练。训练后将得到的文件替换到代码中即可。最后，提供了作者自己的代码示例，展示如何实际操作替换过程。

摘要由CSDN通过智能技术生成

在上一篇文章中只是简单地介绍了一下官方中基于图像标记的例子，并没有说到自己替换图像以及模型，这一篇文章主要就是简单讲一下怎么把自己的模型和图像替换上去。

上一篇文章地址：https://blog.csdn.net/qq_24127447/article/details/115718301

官方示例地址：https://github.com/AR-js-org/AR.js

首先先放一下官方示例的代码，然后我们根据代码来进行讲解。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="js/aframe-ar-nft.js"></script>
 
<style>
  /*加载过程中蒙罩的css*/
  .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;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- 这里是图像标记的配置，下面的url就是图像标记文件的地址，在官方示例中这里使用了cors代理避免跨域问题，作者在这里并没有进行更改 -->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <!-- 这里是一个模型实体，gltf-model是模型的地址，在官方示例中这里同样使用了cors代理避免跨域问题，作者在这里并没有进行更改 -->
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

其实相比较其他的webar，ar.js算是非常简单的了，同时基本功能也都能满足，这也是我比较喜欢用它的原因。

在上面的这些代码中，我们可以控制修改的主要是两个地方，一个是<a-nft>这个标签中的内容，这个里面写的是标记图像的一些配置，另一个就是<a-entity>这个标签中的内容，这个标签里面是对要显示的模型的一些配置。

<a-ntf>标签中的说明如下：

type：指的是标记的类型，目前仅支持“nft”

url：指的是图像标记的地址，后面不带扩展名，这一点后面会提到，这里不详细说

smooth、smoothTolerance、smoothThreshold这些应该是摄像机的效果，我也不是很明白，所以就默认了。

size：图像标记的大小，这里要注意这个标签里面是还有一个大小可以设置的，只不过上面没有写

<a-entity>标签中的说明：

gltf-model：模型的地址

scale、position：这两个应该比较好理解，分别是模型的比例和位置

下面正式开始替换

模型的替换

模型替换非常简单，只要更改一下模型地址，改成自己的就可以看到效果了，比例和位置可以自己进行调整

图像的替换

图像替换我们需要用到一个训练工具来训练图像，这个工具也是官方文档提供的，直接使用在线的服务就可以，这里是地址：https://carnaux.github.io/NFT-Marker-Creator/

在一开始训练图像的时候训练完成了我替换上去发现不行，后来才发现对图像是有要求的，首先是尽量是高清的图像，然后尽量复杂一些，特征点更多，可以自己多找几张图片，然后用那个在线的地址试一下，它下面有五个星星，如果五个星星都亮了，那么这个图像大概率就是可以的。

训练完成之后会得到三个文件，然后把这三个文件放到同一个文件夹里面，把上面图像标记的位置修改成你自己这三个文件的位置就可以了，注意不用带文件扩展名。

我自己最后用的是这个图像：

然后下面是我自己的代码，其实只是更改了一下模型和图像标记的地址而已：

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="js/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;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- 这里是图像标记的配置，下面的url就是图像标记文件的地址，在官方示例中这里使用了cors代理避免跨域问题，作者在这里并没有进行更改 -->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://lelexiaotian.github.io/testarr1gu8/image/qiche"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <!-- 这里是一个模型实体，gltf-model是模型的地址，在官方示例中这里同样使用了cors代理避免跨域问题，作者在这里并没有进行更改 -->
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://lelexiaotian.github.io/testarr1gu8/module/qiche.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

胡晓天o0

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
使用AR.js打造WebAR入门课程（二）——基于图像标记，自行替换图像及模型

在上一篇文章中只是简单地介绍了一下官方中基于图像标记的例子，并没有说到自己替换图像以及模型，这一篇文章主要就是简单讲一下怎么把自己的模型和图像替换上去。上一篇文章地址：https://blog.csdn.net/qq_24127447/article/details/115718301官方示例地址：https://github.com/AR-js-org/AR.js首先先放一下官方示例的代码，然后我们根据代码来进行讲解。<script src="https://cdn.jsdeliv
复制链接

扫一扫

专栏目录