AR.js - 网页上的增强现实

你现在可以拥有 AR.js 的第一个提交了！👉OpenSea

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

2021年12月30日更新：现在还有一个全新的开源 Web AR JS 库，名为 MindAR。如果你需要出色的图像跟踪功能（包括多图像跟踪）和人脸跟踪，去看看吧！目前，AR.js 仍然是唯一提供基于标记和基于位置的 AR 功能的库。

这个项目最初由 @jeromeetienne 创建，之后由 Nicolò Carpignoli 管理，现在由 AR.js 组织维护。

🚀要获取 AR.js 的频繁更新，你可以关注@官方 𝕏(Twitter) 账号并关注这个仓库！

标志由 Simon Poulter 提供。

⚡️AR.js 现在有官方文档了！⚡️

查看这里：AR.js 官方文档。

如果你想初步了解 AR.js 的潜力，可以继续阅读这个 Readme。

⚡️ AR.js 有不同的构建版本。它们都在维护中，且互相独立。

请根据你的项目需求导入其中之一，不要同时导入两个：

带图像跟踪 + 基于位置的 AR 的 AR.js（AFRAME）：
- https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js
带标记跟踪 + 基于位置的 AR 的 AR.js（AFRAME）：
- https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js
带图像跟踪 + 标记跟踪的 AR.js（Threejs）：
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex.js
如果你需要 ARjs 命名空间，请导入 ar.js：
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar.js
带基于位置的 AR 的 AR.js（Threejs）：
- https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js

你也可以通过将 master 关键字替换为版本标签来导入特定版本：

  <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar-nft.js">

入门

🖼 图像跟踪

请按照以下简单步骤操作：

使用以下代码创建一个新项目（或打开这个在线示例并直接跳到最后一步）
在服务器上运行
在手机上打开网站
扫描这张图片，通过相机查看内容。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/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>

<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;">
  <!-- 显示最小加载器，直到图像描述符加载完成 -->
  <div class="arjs-loader">
    <div>加载中，请稍候...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true; precision: medium;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- 我们使用 cors 代理来避免跨域问题 注意！你需要设置你的服务器 -->
    <a-nft
      type="nft"
      url="your-server/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"
    >
      <a-entity
        gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="150 300 -100"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

🌍基于位置的示例

请按照以下简单步骤操作：

使用以下代码片段创建一个新项目，并将 add-your-latitude 和 add-your-longitude 替换为你的纬度和经度，不要包含 <>。
在服务器上运行
在手机上激活 GPS 并导航到示例 URL
环顾四周。你应该会看到文本朝向你，出现在指定位置，即使你四处查看和移动。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoAR.js 演示</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
  </head>

  <body>
    <a-scene
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
    >
      <a-text
        value="此内容将始终面向你。"
        look-at="[gps-camera]"
        scale="120 120 120"
        gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
      ></a-text>
      <a-camera gps-camera rotation-reader> </a-camera>
    </a-scene>
  </body>
</html>

🔲 基于标记的示例

请按照以下简单步骤操作：

使用以下代码创建一个新项目（或打开这个在线示例并直接跳到最后一步）
在服务器上运行
在手机上打开网站
扫描这张图片，通过相机查看内容。

<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <!-- 我们导入不包含NFT但支持标记和基于位置的AR.js版本 -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
        <a-marker preset="hiro">
            <!-- 我们使用cors代理来避免跨域问题 注意！你需要设置你的服务器 -->
            <a-entity
            position="0 0 0"
            scale="0.05 0.05 0.05"
            gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
            ></a-entity>
        </a-marker>
        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

重要提示！请注意，如果您在任何应用程序中引用外部资源，尤其是那些使用NFT的应用程序，如果这些资源不在代码的同一服务器上，您将遇到CORS问题。如果您无法看到跟踪效果，请打开浏览器开发者工具，检查控制台是否有CORS错误。如果有，您必须修复这些错误才能看到您的内容。正确的修复方法是将资源放在与代码相同的服务器上。

如果您无法做到这一点，您可以在任何地方托管一个代理服务器来解决这个问题（https://github.com/Rob--W/cors-anywhere）。请注意，许多托管服务有不允许使用此类服务器的政策。在使用它们之前，请始终检查托管服务的政策，以避免账户被暂停。

在AR.js官方文档上了解更多信息。

ES6 npm包

您可以使用npm安装AR.js，并在任何支持npm模块的兼容项目中使用（如React.js、Vue.js、Next.js或其他），安装命令如下：

// 使用npm安装
npm install @ar-js-org/ar.js

// 使用yarn安装
yarn add @ar-js-org/ar.js

有关一些示例，请阅读此issue。

故障排除、功能请求、社区

您可以在旧的AR.js仓库issues中找到很多帮助。请搜索已打开/已关闭的issues，您可能会找到有用的信息。

贡献

从提交bug报告到创建pull请求：我们欢迎并感谢每一份贡献。如果您计划实现新功能或更改API，请先创建一个issue。这样我们可以确保您的宝贵工作不会白费。

Issues

如果您遇到配置或设置问题，请在StackOverflow上发布问题。您也可以在我们的Gitter聊天室中向我们提问。

如果您发现了bug或有功能建议，欢迎在Github上创建issue。

提交更改

在得到一些反馈后，将更改推送到您的fork，然后提交pull请求。我们可能会建议一些更改或改进或替代方案，但对于小的更改，您的pull请求应该会很快被接受。

一些增加pull请求被接受机会的做法：

遵循现有的编码风格
写一个好的提交消息

许可证

这全是开源的！artoolkit5-js使用LGPLv3许可证和附加权限。而我在AR.js仓库中的所有代码都使用MIT许可证。:)

关于法律细节，请务必查看artoolkit5-js许可证和AR.js许可证。

完整更新日志：AR.js更新日志