AR.js
3.4.6
Vous pouvez désormais posséder le premier engagement d'AR.JS! Openesea
AR.JS est une bibliothèque légère pour la réalité augmentée sur le Web, avec des fonctionnalités telles que le suivi d'images, le suivi des AR et des marqueurs basés sur la localisation.
30/12/21 Mise à jour: il y a maintenant également une toute nouvelle bibliothèque OSS Web AR JS, appelée Mindar. Si vous avez besoin d'une super fonctionnalité de suivi d'image (également de suivi d'images multiples) et de suivi du visage, allez le vérifier!
Pour l'instant, AR.JS est toujours la seule bibliothèque à fournir des fonctionnalités AR basées sur des marqueurs et basées sur la localisation.
Ce projet a été créé par @jeromeetienne, précédemment géré par Nicolò Carpignoli et il est maintenant maintenu par l'Ar.JS Org.
Pour des mises à jour fréquentes sur AR.JS, vous pouvez suivre le compte officiel? (Twitter) et regarder ce repo!
Le logo est gracieuseté de Simon Poulter.
Si vous souhaitez donner un premier aperçu du potentiel AR.JS, vous pouvez continuer avec ce montage.
⚡️ ar.js arrive dans différentes constructions. Ils sont tous deux entretenus. Ils sont exclusifs.
Veuillez importer celui dont vous avez besoin pour votre projet, pas les deux:
Ar.js avec suivi d'image + AR basé sur la localisation (Aframe):
AR.JS avec suivi des marqueurs + AR basé sur l'emplacement (Aframe):
Ar.js avec suivi d'image + suivi des marqueurs (troisjs):
Si vous avez besoin de l'espace de noms Arjs Import AR.js:
AR.JS avec AR basé sur l'emplacement (troisjs):
Vous pouvez également importer une version spécifique remplaçant le mot-clé master par la balise de version:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Veuillez suivre ces étapes simples:
< 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 >Veuillez suivre ces étapes simples:
add-your-latitude et add-your-longitude avec votre latitude et votre longitude, sans le <> . <!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 >Veuillez suivre ces étapes simples:
<!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 >Important! Sachez que si vous faites référence à des ressources externes, dans n'importe quelle application, en particulier celles qui utilisent NFT, vous rencontrerez des problèmes CORS si ces ressources ne sont pas dans le même serveur du code. Si vous ne pouvez pas voir le suivi, veuillez ouvrir vos outils de développement de navigateur et vérifier si vous avez des erreurs COR dans la console. Si oui, vous devez corriger ces erreurs pour voir votre contenu. La correction correcte consiste à placer vos ressources sur le même serveur de votre code.
Si vous ne pouvez pas le faire, vous pouvez héberger un serveur de proxy n'importe où pour résoudre cela (https://github.com/rob--w/cors-anywhere). Veuillez noter que plusieurs services d'hébergement ont des politiques qui ne permettent pas d'utiliser un tel serveur. Vérifiez toujours les politiques des services d'hébergement avant de les utiliser pour éviter les suspensions de compte
En savoir plus sur la documentation officielle de l'AR.JS.
Vous pouvez installer AR.JS avec NPM et utiliser dans n'importe quel projet compatible qui prend en charge les modules NPM (react.js, vue.js, next.js ou whatelse), pour l'installer:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Pour quelques exemples, lisez ce numéro.
ar-threex.mjs et ar.mjs Avec les dernières mises à jour (3.4.6), three.js peuvent désormais être importés à l'aide de la syntaxe du module ES. Pour s'aligner sur cette norme, ar-threex.mjs , ar.mjs et ar-threex-location-only.mjs doivent également être importés de la même manière à l'aide d'une carte d'importation. Voici un exemple de la façon d'importer ces modules dans votre projet:
// 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 >Lisez les exemples inclus dans ce référentiel pour plus d'informations, mais en gros, le seul changement est la syntaxe d'importation.
Vous pouvez trouver beaucoup d'aide sur les anciens problèmes de référentiels ar.js. Veuillez rechercher des problèmes ouverts / fermés, vous pouvez trouver des choses intéressantes.
De l'ouverture d'un rapport de bogue à la création d'une demande de traction: chaque contribution est appréciée et bienvenue. Si vous prévoyez d'implémenter une nouvelle fonctionnalité ou de modifier l'API, veuillez d'abord créer un problème. De cette façon, nous pouvons nous assurer que votre travail précieux n'est pas vain.
Si vous rencontrez des problèmes de configuration ou de configuration, veuillez poster une question à StackOverflow. Vous pouvez également nous poser la question dans notre chat de chat gitter
Si vous avez découvert un bug ou avez une suggestion de fonctionnalités, n'hésitez pas à créer un problème sur GitHub.
Après avoir obtenu des commentaires, appuyez sur votre fourchette et soumettez une demande de traction. Nous pouvons suggérer quelques modifications, améliorations ou alternatives, mais pour les petits changements, votre demande de traction doit être acceptée rapidement.
Certaines choses qui augmenteront les chances que votre demande de traction soit acceptée:
Tout est open-source ! Artoolkit5-JS est sous la licence LGPLV3 et l'autorisation supplémentaire. Et tout mon code dans le référentiel AR.JS est sous la licence MIT. :)
Pour les détails juridiques, assurez-vous de consulter la licence Artoolkit5-JS et la licence AR.JS.
Changelog complet: ar.js changelog
