AR.js
3.4.6
Sie können jetzt den ersten Commit von Ar.js besitzen! Opensea
AR.JS ist eine leichte Bibliothek für Augmented Reality im Web, die Funktionen wie Image-Tracking, standortbasierter AR- und Marker-Tracking ausgestattet ist.
30/12/21 Update: Es gibt jetzt auch eine brandneue OSS -Web -Ar -JS -Bibliothek namens Mindar. Wenn Sie eine großartige Bildverfolgungsfunktion (auch mehrere Bildverfolgung) und Gesichtsverfolgung benötigen, sehen Sie sich diese an!
Derzeit ist AR.JS nach wie vor die einzige Bibliothek, die Markerbasis und standortbasierte AR -Funktionen bereitstellt.
Dieses Projekt wurde von @Jeromeetienne erstellt, die zuvor von Nicolò Carpignoli verwaltet wurde und jetzt von der AR.JS -ORG gepflegt wird.
Für häufige Updates zu AR.js können Sie @the offiziell folgen? (Twitter) Konto und dieses Repo!
Logo ist mit freundlicher Genehmigung von Simon Poulter.
Wenn Sie einen ersten Blick auf das Ar.js -Potenzial geben möchten, können Sie diese Readme fortsetzen.
⚡️ ar.js kommt in verschiedenen Builds. Sie werden beide gepflegt. Sie sind exklusiv.
Bitte importieren Sie die, die Sie für Ihr Projekt benötigen, nicht beides:
AR.js mit Bildverfolgung + standortbasiertem AR (Aframe):
AR.js mit Marker Tracking + Standortbasierter AR (Aframe):
AR.js mit Bildverfolgung + Markerverfolgung (drei Js):
Wenn Sie den ARJS -Namespace benötigen, importieren Sie AR.js:
AR.js mit standortbasiertem AR (dreijs):
Sie können auch eine bestimmte Version importieren, die master -Keyword durch Versions -Tag ersetzt:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Bitte befolgen Sie diese einfachen Schritte:
< 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 >Bitte befolgen Sie diese einfachen Schritte:
add-your-latitude und add-your-longitude mit Ihrem Breitengrad und Längengrad ohne <> hinzu. <!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 >Bitte befolgen Sie diese einfachen Schritte:
<!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 >Wichtig! Beachten Sie, dass Sie in einer App, insbesondere in der NFT, bei der Sie sich auf externe Ressourcen beziehen, auf CORS -Probleme stoßen, wenn sich diese Ressourcen nicht auf demselben Server des Codes befinden. Wenn Sie das Tracking nicht sehen können, öffnen Sie bitte Ihre Browser -Entwickler -Tools und überprüfen Sie, ob Sie CORS -Fehler in der Konsole haben. In diesem Fall müssen Sie diese Fehler beheben, um Ihren Inhalt anzuzeigen. Die richtige Lösung besteht darin, Ihre Ressourcen auf demselben Server Ihres Codes zu platzieren.
Wenn Sie dies nicht tun können, können Sie einen Proxy Anywhere-Server hosten, um dies zu lösen (https://github.com/rob-w/cors-anywhere). Bitte beachten Sie, dass mehrere Hosting -Dienste Richtlinien haben, die es nicht ermöglichen, einen solchen Server zu verwenden. Überprüfen Sie immer die Richtlinien für die Hosting -Dienste, bevor Sie sie verwenden, um Kontosuspensionen zu vermeiden
Erfahren Sie mehr über die offizielle Dokumentation von AR.JS.
Sie können AR.js mit NPM installieren und in jedem kompatiblen Projekt verwenden, das NPM -Module (React.js, Vue.js, Next.js oder Whatelse) unterstützt, um es zu installieren:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Für einige Beispiele lesen Sie dieses Problem.
ar-threex.mjs und ar.mjs Mit den neuesten Updates (3.4.6) können three.js jetzt mit der ES -Modulsyntax importiert werden. Um sich an diesem Standard anzupassen, sollten ar-threex.mjs , ar.mjs und ar-threex-location-only.mjs auch mit einer Importkarte importiert werden. Hier ist ein Beispiel dafür, wie Sie diese Module in Ihr Projekt importieren:
// 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 >Lesen Sie die in diesem Repository enthaltenen Beispiele für weitere Informationen. Grundsätzlich ist die einzige Änderung die Importsyntax.
Sie können viel Hilfe bei den alten Ar.js -Repositories finden. Bitte suchen Sie nach offenen/geschlossenen Problemen, Sie können interessante Dinge finden.
Von der Öffnung eines Fehlerberichts bis zum Erstellen einer Pull -Anfrage: Jeder Beitrag wird geschätzt und willkommen. Wenn Sie planen, eine neue Funktion zu implementieren oder die API zu ändern, erstellen Sie zuerst ein Problem. Auf diese Weise können wir sicherstellen, dass Ihre kostbare Arbeit nicht umsonst ist.
Wenn Sie Konfigurations- oder Einrichtungsprobleme haben, stellen Sie bitte eine Frage in Stackoverflow. Sie können uns auch die Frage in unserem Gitter -Chatroom an uns beantworten
Wenn Sie einen Fehler entdeckt haben oder einen Feature -Vorschlag haben, können Sie ein Problem auf GitHub erstellen.
Nachdem Sie ein Feedback erhalten haben, drücken Sie auf Ihre Gabel und senden Sie eine Pull -Anfrage. Wir können einige Änderungen oder Verbesserungen oder Alternativen vorschlagen, aber bei kleinen Änderungen sollte Ihre Pull -Anfrage schnell akzeptiert werden.
Einige Dinge, die die Wahrscheinlichkeit erhöhen, dass Ihre Pull -Anfrage angenommen wird:
Es ist alles Open-Source ! Artoolkit5-JS unterliegt LGPLV3-Lizenz und zusätzliche Genehmigung. Und alle mein Code im AR.JS -Repository stehen unter MIT -Lizenz. :)
Weitere Informationen finden Sie unter Artoolkit5-JS-Lizenz und AR.JS-Lizenz.
Voller ChangeLog: ar.js Changelog
