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
