AR.js：一个可构建AR应用程序的WEB AR框架

概述

AR.js是一个Web AR框架，它可以在浏览器中运行AR应用程序。它支持多个AR平台，包括iOS和Android，并提供了丰富的文档和示例，可用于快速构建AR应用程序。

如果您想初步了解 AR.js 的潜力，请继续阅读此自述文件。

AR.js 即将推出不同的版本。它们都得到维护。他们是独一无二的。

请导入项目所需的一个，而不是两个：

[hidecontent type="logged" desc="隐藏内容：登录后可查看"]

具有图像跟踪 + 基于位置的 AR (AFRAME) 的 AR.js：
- https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js
带有标记跟踪 + 基于位置的 AR (AFRAME) 的 AR.js：
- 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.js 与基于位置的 AR（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;">
  <!-- 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; precision: medium;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
    <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 demo</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="This content will always face you."
        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>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <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">
            <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
            <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 或其他）的兼容项目中使用，安装它运行：

// Install with npm
npm install @ar-js-org/ar.js

// Install with yarn
yarn add @ar-js-org/ar.js

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

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

您可以在旧的AR.js 存储库问题上找到很多帮助。请搜索打开/关闭的问题，你可能会发现有趣的东西。

贡献

从打开错误报告到创建拉取请求：感谢和欢迎每一个贡献。如果您计划实施新功能或更改 api，请先创建问题。这样我们就可以确保您的宝贵工作没有白费。

问题

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

如果您发现了错误或有功能建议，请随时在 Github 上创建问题。

提交更改

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

一些会增加您的拉取请求被接受的机会的事情：

遵循现有的编码风格
写好提交信息

查看：AR.js 官方文档。

执照

都是开源的！artoolkit5-js 已获得 LGPLv3 许可和附加许可。我在 AR.js 存储库中的所有代码都在 MIT 许可下。:)

有关法律细节，请务必查看artoolkit5-js license 和AR.js license。

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

[/hidecontent]