AR.js
3.4.6
これで、ar.jsの最初のコミットを所有できます！ opensea
AR.JSは、ウェブ上の拡張現実のための軽量ライブラリであり、画像追跡、位置ベースのAR、マーカートラッキングなどの機能が付属しています。
30/12/21アップデート：現在、Mindarと呼ばれる新しいOSS Web Ar JSライブラリもあります。優れた画像追跡機能（複数の画像追跡）とフェイストラッキングが必要な場合は、チェックしてください！
今のところ、AR.JSは、マーカーベースとロケーションベースのAR機能を提供する唯一のライブラリです。
このプロジェクトは、以前はニコロCarpignoliが管理していた@Jeromeetienneによって作成されており、現在はAR.JS組織によって維持されています。
ar.jsの頻繁な更新については、 @the why official？（Twitter）アカウントをフォローして、このレポをご覧ください！
ロゴはサイモン・ポールターの好意によるものです。
AR.JSの可能性を最初に見たい場合は、このREADMEを続けることができます。
ar.jsはさまざまなビルドで登場しています。どちらも維持されています。彼らは排他的です。
両方ではなく、プロジェクトに必要なものをインポートしてください。
画像追跡 +ロケーションベースのAR（aframe）を備えたAR.JS：
マーカートラッキング +ロケーションベースのARを備えたAR.JS（AFRAME）：
画像追跡 +マーカートラッキング（3JS）を備えたAR.JS：
ARJS名空間インポートar.jsが必要な場合：
ロケーションベースのAR（3JS）を備えたAR.JS：
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エラーがあるかどうかを確認してください。その場合、コンテンツを確認するためにこれらのエラーを修正する必要があります。正しい修正は、コードの同じサーバーにリソースを配置することです。
それができない場合は、プロキシAnywhere Serverをホストしてそれを解決できます（https://github.com/rob-w/cors-anywhere）。いくつかのホスティングサービスには、そのようなサーバーの使用が許可されていないポリシーがあることに注意してください。アカウントの停止を避けるために、それらを使用する前にホスティングサービスポリシーを常に確認してください
詳細については、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
