AR.js
3.4.6
¡Ahora puede ser dueño del primer compromiso de AR.JS! Opensea
AR.JS es una biblioteca liviana para la realidad aumentada en la web, viene con características como seguimiento de imágenes, AR basado en la ubicación y seguimiento de marcadores.
30/12/21 ACTUALIZACIÓN: Ahora también hay una nueva biblioteca OSS Web JS alrededor, llamada Mindar. Si necesita una excelente función de seguimiento de imágenes (también seguimiento de imágenes múltiples) y seguimiento de la cara, ¡vaya a verlo!
Por ahora, AR.JS sigue siendo la única biblioteca que proporciona características de AR basadas en marcadores y ubicación.
Este proyecto ha sido creado por @Jeromeetienne, previamente administrado por Nicolò Carpignoli y ahora lo mantienen la Org AR.JS.
Para actualizaciones frecuentes en AR.JS ¡Puede seguir @The Oficial? (Twitter) Cuenta y ver este repositorio!
El logotipo es cortesía de Simon Poulter.
Si desea dar un primer vistazo al potencial AR.JS, puede continuar con este ReadMe.
⚡️ Ar.js viene en diferentes construcciones. Ambos se mantienen. Son exclusivos.
Importe el que necesita para su proyecto, no ambos:
AR.JS con seguimiento de imágenes + AR basado en ubicación (Aframe):
AR.JS con seguimiento de marcadores + AR basado en ubicación (Aframe):
AR.JS con seguimiento de imágenes + seguimiento de marcadores (tresjs):
Si necesita el espacio de nombres de ARJS, importar AR.JS:
AR.JS con AR basado en la ubicación (tresjs):
También puede importar una versión específica que reemplaza la palabra clave master con la etiqueta de la versión:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Siga estos simples pasos:
< 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 >Siga estos simples pasos:
add-your-latitude y add-your-longitude con su latitud y longitud, sin <> . <!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 >Siga estos simples pasos:
<!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 >¡Importante! Tenga en cuenta que si se refiere a recursos externos, en cualquier aplicación, especialmente aquellos que usan NFT, encontrará problemas de CORS si esos recursos no están en el mismo servidor del código. Si no puede ver el seguimiento, abra las herramientas de desarrollo del navegador y verifique si tiene errores CORS en la consola. Si es así, debe corregir esos errores para ver su contenido. La solución correcta es colocar sus recursos en el mismo servidor de su código.
Si no puede hacer eso, puede alojar un servidor proxy en cualquier lugar para resolverlo (https://github.com/rob-w/cors-wherewhere). Tenga en cuenta que varios servicios de alojamiento tienen políticas que no permiten usar dicho servidor. Siempre verifique las políticas de servicios de alojamiento antes de usarlas para evitar suspensiones de cuentas
Obtenga más información sobre la documentación oficial de AR.JS.
Puede instalar AR.JS con NPM y usar en cualquier proyecto compatible que admita los módulos NPM (react.js, vue.js, next.js o whatelse), para instalarlo Ejecutar:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Para algunos ejemplos lee este problema.
ar-threex.mjs y ar.mjs Con las últimas actualizaciones (3.4.6), three.js ahora se pueden importar utilizando la sintaxis del módulo ES. Para alinearse con este estándar, ar-threex.mjs , ar.mjs y ar-threex-location-only.mjs también deben importarse de la misma manera utilizando un mapa de importación. Aquí hay un ejemplo de cómo importar estos módulos en su proyecto:
// 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 >Lea los ejemplos incluidos en este repositorio para obtener más información, pero básicamente el único cambio es la sintaxis de importación.
Puede encontrar mucha ayuda en los viejos problemas de repositorios AR.JS. Busque en problemas abiertos/cerrados, puede encontrar cosas interesantes.
Desde abrir un informe de errores hasta crear una solicitud de extracción: cada contribución es apreciada y bienvenida. Si planea implementar una nueva función o cambiar la API, cree un problema primero. De esta manera, podemos asegurarnos de que su precioso trabajo no sea en vano.
Si tiene problemas de configuración o configuración, publique una pregunta en StackOverflow. También puede abordarnos la pregunta en nuestra sala de chat de Gitter.
Si ha descubierto un error o tiene una sugerencia de características, no dude en crear un problema en GitHub.
Después de recibir comentarios, empuje a su horquilla y envíe una solicitud de extracción. Podemos sugerir algunos cambios, mejoras o alternativas, pero para pequeños cambios su solicitud de extracción debe aceptarse rápidamente.
Algunas cosas que aumentarán la posibilidad de que se acepte su solicitud de extracción:
¡ Todo es de código abierto ! ARTOOLKIT5-JS está bajo la licencia LGPLV3 y permiso adicional. Y todo mi código en el repositorio AR.JS está bajo la licencia MIT. :)
Para obtener detalles legales, asegúrese de consultar la licencia ARTOOLKIT5-JS y la licencia AR.JS.
ChangeLog completo: AR.JS ChangeLog
