AR.js
3.4.6
您现在可以拥有AR.JS的第一个提交！ Opensea
AR.JS是一个轻巧的库，用于在网络上增强现实，具有图像跟踪，基于位置的AR和标记跟踪之类的功能。
30/12/21更新：现在还有一个全新的OSS Web AR JS库，称为Mindar。如果您需要出色的图像跟踪功能（也需要多个图像跟踪）和面部跟踪，请查看！
目前，AR.JS仍然是唯一提供基于标记和基于位置的AR功能的库。
该项目是由@Jeromeetienne创建的，该项目以前由NicolòParpignoli管理，现在由AR.JS org维护。
对于AR.JS的频繁更新，您可以关注 @官方？（Twitter）帐户并观看此仓库！
徽标由西蒙·普尔特（Simon Poulter）提供。
如果您想先看一下Ar.js的潜力，可以继续使用此读数。
⚡️Ar.js正在不同的构建中。他们俩都维护了。他们是独家的。
请导入您项目所需的一个，而不是两者：
带有图像跟踪 +位置基于AR（AFRAME）的AR.JS：
带有标记跟踪 +位置的AR（AFRAME）的AR.JS：
带有图像跟踪 +标记跟踪（三j）的AR.JS：
如果您需要arjs名称空间导入ar.js：
Ar.js具有基于位置的AR（三J）：
您还可以将特定版本导入使用版本标签替换master关键字的特定版本：
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > 请按照以下简单步骤：
< script src =" https://cdn.jsdelivr.net/gh/aframevr/[email protected]/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 。 <!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.6.0/aframe.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/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.6.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---------------------------------------------请注意，一些托管服务的策略不允许使用该服务器。在使用托管服务策略以避免帐户暂停之前，请务必检查托管服务策略
了解有关AR.JS官方文档的更多信息。
您可以使用NPM安装AR.JS ，并在支持NPM模块的任何兼容项目中使用（react.js，vue.js，next.js或whatelse），以安装运行：
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
有关一些示例，请阅读此问题。
ar-threex.mjs和ar.mjs的新导入语法有了最新的更新（3.4.6），现在可以使用ES模块语法导入three.js 。要与此标准保持一致，也应使用导入映射以相同的方式导入ar-threex.mjs ， ar.mjs和ar-threex-location-only.mjs 。这是如何在项目中导入这些模块的示例：
// Example importing ar-threex.mjs
< script type =" importmap " >
{
"imports" : {
"three" : "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js" ,
"threex" : "./path/to/ar-threex.mjs" ,
}
}
</ script >
< script type =" module " >
import * as THREE from 'three' ;
import { ArToolkitSource , ArToolkitContext , ArMarkerControls } from 'threex'
// Your AR.js code here
</ script >阅读此存储库中包含的示例以获取更多信息，但基本上唯一的更改是导入语法。
您可以在旧的AR.JS存储库问题上找到很多帮助。请在开放/关闭的问题上搜索，您可能会发现有趣的东西。
从打开错误报告到创建拉力请求：每个贡献都将受到赞赏和欢迎。如果您打算实现新功能或更改API，请首先创建问题。这样，我们可以确保您的宝贵工作不会徒劳。
如果您有配置或设置问题，请在stackoverflow上发布一个问题。您还可以在我们的吉特聊天室中向我们解决这个问题
如果您发现了一个错误或有功能建议，请随时在Github上创建问题。
获得一些反馈后，将其推到叉子并提交拉动请求。我们可能会建议一些更改，改进或替代方案，但是对于小更改，您的拉力请求应迅速接受。
有些事情会增加您的拉申请的机会：
都是开源的！ ArtoolKit5-JS符合LGPLV3许可证和额外许可。我在AR.JS存储库中的所有代码均在MIT许可下。 :)
有关法律详细信息，请务必查看ArtoolKit5-JS许可证和AR.JS许可证。
完整的变形值：Ar.js ChangElog
