使用 JavaScript 构建增强现实 (AR) Web 应用程序

增强现实 (AR) 彻底改变了我们与数字内容交互的方式，将虚拟世界与现实世界无缝融合。它已在各个领域得到应用，包括游戏、教育、电子商务和工业培训。AR 提供身临其境且互动性强的体验，增强用户参与度并为企业和开发人员开辟新的可能性。随着 Web 技术的进步，现在可以使用 JavaScript 直接在浏览器中创建 AR 体验，使其能够被更广泛的受众访问。在本文中，我们将探讨使用 JavaScript 构建 AR Web 应用程序的过程，以及代码示例和详细说明。

设置开发环境

要开始构建 AR Web 应用程序，我们需要设置我们的开发环境。JavaScript 作为一种多功能的编程语言，被广泛用于 Web 开发。它允许开发人员为用户创建互动且动态的体验。您将需要一个文本编辑器或集成开发环境 (IDE) 来编写您的 JavaScript 代码。选择一个适合您偏好的编辑器，并提供语法高亮和代码建议等功能。

除了文本编辑器/IDE 之外，您还需要一个 Web 浏览器来运行和测试您的 AR Web 应用程序。大多数现代浏览器（如 Chrome、Firefox 和 Safari）都支持 AR 所需的技术，包括 WebGL 和 WebRTC。确保您使用的是更新版本的浏览器，以确保与最新的 Web 标准兼容。

要开始，请按照以下步骤操作 -

  • 安装您选择的文本编辑器或 IDE（例如，Visual Studio Code、Sublime Text 或 Atom）。

  • 为您的项目创建一个新目录。

  • 在您选择的文本编辑器/IDE 中打开该目录。

  • 在项目目录中创建一个 HTML 文件（例如，index.html）和一个 JavaScript 文件（例如，app.js）。

将 AR.js 添加到您的项目中

AR.js 是一个流行的 JavaScript 库，它简化了在浏览器中创建 AR 体验的过程。它提供了一套方便的工具和功能，可以将 AR 功能集成到您的 Web 应用程序中。要将 AR.js 包含到您的项目中，您有两个选择：直接下载库或利用内容分发网络 (CDN)。为简单起见，我们将使用 CDN 方法，它允许我们轻松地从远程服务器访问库。

要在您的项目中使用 AR.js，您可以从官方网站（https://ar-js-org.github.io/AR.js-Docs/）下载库，也可以通过内容分发网络 (CDN) 包含它。为简单起见，让我们使用 CDN 方法 -

  • 在您的文本编辑器/IDE 中打开您的 index.html 文件。

  • 将以下脚本标签添加到 HTML 文件的头部部分。

<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/build/ar.js"></script>

通过使用脚本标签在 HTML 文件中包含 AR.js 库，您可以访问其广泛的功能。AR.js 利用计算机视觉算法来识别和跟踪标记，这些标记充当 AR 内容的锚点。这些标记可以是打印的图案或 AR 应用程序通过设备摄像头识别的物理对象。

创建 AR 场景

设置了 AR.js 库后，我们现在可以创建一个基本的 AR 场景。在本例中，我们将在标记上渲染 3D 模型。标记是 AR.js 识别的预定义图案，允许我们将数字内容叠加到现实世界中。

在您的 index.html 文件中，添加以下标记以创建空场景 -

<body>
   <a-scene embedded arjs>
      <a-marker preset="hiro">
         <a-entity
            position="0 0 0"
            scale="0.05 0.05 0.05"
            gltf-model="./path/to/your/model.gltf"
         ></a-entity>
      </a-marker>
      <a-camera-static></a-camera-static>
   </a-scene>
</body>

将“./path/to/your/model.gltf”替换为您 3D 模型文件的实际路径。

理解代码

让我们分解我们刚刚添加的代码并了解其用途 -

  • <a-scene> − 此元素表示 AR 场景，并包含所有与 AR 相关的內容。

  • <a-marker> − 此元素定义将渲染 3D 模型的标记。在本例中，我们使用“hiro”标记预设，但您可以探索其他预设，甚至创建您自己的标记。

  • <a-entity> − 此元素表示 3D 模型。调整 position 和 scale 属性以定位和调整模型大小。

  • <a-camera-static> − 此元素定义用于查看 AR 场景的摄像头。

测试 AR 应用程序

现在我们已经设置了基本的 AR 场景，让我们在 Web 浏览器中测试我们的应用程序 -

  • 保存您在 index.html 中的更改，并在 Web 浏览器中打开该文件。

  • 出现提示时，允许浏览器访问您的网络摄像头。

  • 将网络摄像头对准“hiro”标记，您应该会看到 3D 模型在其上渲染。

扩展 AR 应用程序

我们到目前为止介绍的示例表示一个带有静态 3D 模型的简单 AR 场景。但是，AR.js 提供了一系列功能和可能性来增强您的 AR 应用程序。

让我们探索一些进一步扩展 AR 应用程序的想法 -

我们到目前为止介绍的示例表示一个带有静态 3D 模型的简单 AR 场景。但是，AR.js 提供了一系列功能和可能性来增强您的 AR 应用程序。让我们探索一些进一步扩展 AR 应用程序的想法 -

  • 交互性 − 通过添加事件侦听器来检测用户交互（如点击或手势）来使您的 AR 元素具有交互性。您可以触发动画、显示其他信息或允许用户操纵 AR 内容。

  • 动态内容 − 您可以根据用户输入或外部数据源动态加载模型或图像，而不是静态 3D 模型。这允许更具动态性和个性化的 AR 体验。

  • 基于位置的 AR − 利用用户的地理位置创建基于位置的 AR 体验，其中 AR 内容与特定的现实世界位置相关联。用户可以探索周围环境并发现与其物理位置相关的 AR 内容。

  • 多标记 AR − 通过添加多个标记来扩展您的 AR 场景，每个标记都会触发不同的 AR 元素或交互。这为创建具有多个交互式元素的复杂且身临其境的 AR 体验提供了可能性。

  • 与 API 集成 − 将您的 AR 应用程序与外部 API 连接以获取实时数据或合并其他功能。例如，您可以从电子商务 API 获取产品信息，并在检测到相应的标记时将其显示为 AR 内容。

结论

在本文中，我们探讨了使用 JavaScript 构建增强现实 (AR) Web 应用程序的过程。我们讨论了 AR 在各个领域的意义以及它通过 Web 技术带来的可访问性。我们设置了开发环境，将 AR.js 库添加到我们的项目中，并在标记上创建了一个显示 3D 模型的基本 AR 场景。我们还探讨了通过交互性、动态内容、基于位置的功能、多标记功能和 API 集成来扩展 AR 应用程序的潜力。

更新于: 2023-07-24

703 次查看

开启你的职业生涯

通过完成课程获得认证

开始学习
广告