使用AR.js打造WebAR入门课程（一）——基于图像标记的示例

最新推荐文章于 2024-08-28 18:10:06 发布

胡晓天o0

最新推荐文章于 2024-08-28 18:10:06 发布

阅读量2.6k

点赞数 1

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

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

版权

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

6 篇文章 2 订阅

订阅专栏

ar.js

5 篇文章 11 订阅

订阅专栏

AR.js是一个用于Web增强现实的轻量级库，具有图像跟踪，基于位置的AR和标记跟踪等功能。

AR.js有基于图像、基于位置和基于标记的三种功能，这一篇文章只是根据官方文档做一个基于图像的示例。

官方文档地址：

https://ar-js-org.github.io/AR.js-Docs/

注意事项：

一、AR.js必须使用支持https的服务器，如果没有自己的服务器的话可以选择在自己本地搭建，也可以选择使用github，这方面可以自行搜索解决，这里不再赘述。

二、对于入门者来说直接把官方文档上的代码复制过去是看不到效果的，因为官方文档的代码有一些依赖文件在国内加载不出来（原因你懂的）

针对上面的第二点注意事项，我把需要的依赖文件下载了下来，采用本地化的形式进行了加载，其实主要就是两个js文件，一个是aframe-master.min.js，另一个是aframe-ar-nft.js，在实际测试中主要就是第二个js文件用国内网络无法加载。

关于这两个文件大家可以直接从github上面下载下来，下面是下载地址，所有的依赖文件都可以在里面找到：

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>

在你自己搭建好的服务器里新建一个html文件，然后把上面的代码复制粘贴进去，注意修改好最上面两行依赖文件的地址，然后用手机打开网址，调取摄像头，扫描下面的图片，就可以看到模型出现了。