使用 AR.js 来构建一个AR网站
前言
用户体验中最令人兴奋的新方法之一就是增强现实。AR 已经在各个领域得到应用，例如汽车行业提供增强导航，教育领域提供交互式学习体验，制造领域辅助设计和规划。增强现实还通过提供 AR 体验的网站扩展到互联网。在本文中，将介绍使用 AR.JS JavaScript 框架创建一个具有增强现实的网站。
什么是 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 体验。
创建图像描述符和 3D 模型
自然特征跟踪是一种允许用户能够将图像用作 AR 触发器的技术。当 NFT 制造商处理图像时，它会识别图像中有趣的点，这些点被称为图像描述符。这些点可确定相机的位置。NFT 标记可以使用 NFT Marker Creator 工具创建，该工具有网页版和 Node.js 版。
只需访问网页版，选择图像并生成 NFT。它将创建三个扩展名为 .fset、.fset3 和 .iset 的文件。例如，假设您使用名为 toy-car-image 的图像。在这种情况下，描述符名称将是 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 存储库中的示例模型。
将 AR 集成到网页
现在我们已经有了资产。下一步是将它们集成到网页中并创建 AR 体验。由于 AR.JS 支持 A-Frame 和 three.js 来显示增强内容，我们必须确保为 Web 应用程序中使用的框架导入正确的库。在这里，我们应该为 A-Frame 导入 AR.js 图像跟踪库。
以下代码块演示了如何将 AR.JS 与创建的图像集成以实现网页上的 AR 体验。
索引.html
<!-- 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 成功创建了增强现实体验。
作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一位典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解，😄公众号：玩转音视频。同时也是 CSDN 博客专家（博客之星）、华为云享专家（共创编辑、十佳博主）、51CTO社区编辑、InfoQ 签约作者，欢迎关注我分享更多干货！😄
- 点赞
- 收藏
- 关注作者
评论（0）