NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - AI模型在线查看 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割 - 3D道路快速建模

增强现实是为用户带来体验的最令人兴奋的新方式之一。 AR 已被应用于各个领域，例如汽车行业提供增强导航、教育领域提供交互式学习体验以及制造业以辅助设计和规划。

增强现实还扩展到互联网，提供 AR 体验的网站。 在本文中，我们将使用 AR.JS JavaScript 框架创建一个具有增强现实功能的网站。

1、什么是 AR.js？

AR.JS 是一个轻量级 JavaScript 库，允许用户将增强现实集成到 Web 应用程序中。 这个开源库是一个利用 Three.js、A-Frame 和 jsartoolkit 的纯 Web 解决方案。 它适用于任何支持 webgl 和 webrtc 的设备。 AR.JS支持以下AR类型；

  • 图像跟踪 - 识别 2D 图像并显示相关 AR 内容
  • 基于位置的 AR - 根据位置显示 AR 内容
  • 标记跟踪 - 使用 QR 码等标记来显示相关的 AR 内容。

在这篇文章中，我们将重点讨论使用图像跟踪方法创建 AR 体验。

为了创建 AR 体验，我们需要一张图像作为触发器以及将要显示的 AR 内容。 然后它们可以与 AR.JS 库一起集成到网页中，以促进 AR 体验。

2、创建图像描述符和 3D 模型

自然特征跟踪是一项使用户能够使用图像作为 AR 触发器的技术。 当 NFT 制造商处理图像时，它会识别图像的有趣点，这些点称为图像描述符。 这些点允许您确定相机的位置。 NFT 标记可以使用 NFT Marker Creator 工具创建，该工具有 Web 版本和 Node.Js 版本。

只需访问网页版，选择图像并生成 NFT。 它将创建三个扩展名为 .fset、.fset3 和 .iset 的文件。 例如，假设您使用名为 toy-car-image 的图像。 在这种情况下，描述符名称将是玩具车图像，它将创建以下文件。

  • toy-car-image.fset
  • toy-car-image.fset3
  • toy-car-image.iset

我们将在 AR 内容中使用 glTF（GL 传输格式）的 3D 模型。 glTF 允许高效传输和加载 3D 场景和模型。 它最大限度地减少了 3D 资源的大小，并减少了使用这些 3D 资源所需的运行时处理。 出于本文的目的，我们将使用 gLTF GitHub 存储库中的示例模型。

3、将 AR 集成到网页中

现在我们有了我们的资产。 下一步是将它们集成到网页中并创建 AR 体验。 由于 AR.JS 支持 A-Frame 和 Three.js 来显示增强内容，因此我们必须确保导入 Web 应用程序中使用的框架的正确库。 在这里，我们应该导入 A-Frame 的 AR.js 图像跟踪库，因为我们将使用 A-Frame。

以下 index.html代码块演示了如何将 AR.JS 与创建的资产集成以促进网页上的 AR 体验：

<!-- Import A-Frame and AR.js libraries -->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
 
<!-- Loading Screen Styles -->
<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 Description until the assets are loaded -->
  <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;"
  >
    <!-- The NFT image used for Tracking -->
    <a-nft
      type="nft"
      url="<Path to NTF Files>"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <!-- Define the GLTF model -->
      <a-entity
        gltf-model="<Path to Model>"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <!-- Create the Static Camera -->
    <a-entity camera></a-entity>
  </a-scene>
</body>

现在用户可以访问该网站了。 它将创建 AR 体验并向用户呈现资产加载屏幕，如下所示：

完成后，指向图像，你将看到代码块中指定的 AR 内容。

就是这样！ 你已使用 AR.JS 成功创建了增强现实体验。

原文链接：Creating An Augmented Reality Website With AR.js

BimAnt翻译整理，转载请标明出处