AR.js
3.4.6
Agora você pode possuir o primeiro compromisso do AR.JS! OpenSea
O AR.JS é uma biblioteca leve para a realidade aumentada na web, vindo com recursos como rastreamento de imagens, AR baseado em localização e rastreamento de marcadores.
30/12/21 Atualização: agora também existe uma nova biblioteca OSS Web AR JS por perto, chamada Mindar. Se você precisar de um ótimo recurso de rastreamento de imagem (também rastreamento de imagens múltiplas) e rastreamento de rosto, vá conferir!
Por enquanto, o AR.JS ainda é a única biblioteca que fornece recursos de AR baseados em marcadores e baseados em localização.
Este projeto foi criado por @jeromeetienne, anteriormente gerenciado pela Nicolò Carpignoli e agora é mantido pela Org AR.JS.
Para atualizações frequentes no AR.JS, você pode seguir a conta oficial? (Twitter) e assistir a este repositório!
O logotipo é cortesia de Simon Poulter.
Se você quiser dar uma primeira olhada no potencial do AR.JS, poderá continuar com este ReadMe.
⚡️ AR.JS está chegando em diferentes construções. Ambos são mantidos. Eles são exclusivos.
Por favor, importe o que você precisa para o seu projeto, não os dois:
Ar.js com rastreamento de imagem + base baseado em localização (aframe):
AR.JS com rastreamento de marcadores + AR baseado em localização (Aframe):
Ar.js com rastreamento de imagem + rastreamento de marcadores (trêsjs):
Se você precisar do espaço de nome de ARJS importar ar.js:
AR.JS com AR baseado em localização (trêsjs):
Você também pode importar uma versão específica que substitui a palavra -chave master por tag de versão:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Siga estas etapas 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 >Siga estas etapas simples:
add-your-latitude e add-your-longitude com sua latitude e longitude, sem o <> . <!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 estas etapas 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 >Importante! Esteja ciente de que, se você estiver se referindo a recursos externos, em qualquer aplicativo, especialmente aqueles que usam a NFT, encontrará problemas do CORS se esses recursos não estiverem no mesmo servidor do código. Se você não consegue ver o rastreamento, abra suas ferramentas de dev do navegador e verifique se você tem erros de CORS no console. Nesse caso, você deve corrigir esses erros para ver seu conteúdo. A correção correta é colocar seus recursos no mesmo servidor do seu código.
Se você não puder fazer isso, poderá hospedar um servidor proxy em qualquer lugar para resolver isso (https://github.com/rob--w/cors-anywhere). Observe que vários serviços de hospedagem têm políticas que não permitem usar esse servidor. Sempre verifique as políticas de serviços de hospedagem antes de usá -las para evitar suspensões de conta
Saiba mais sobre a documentação oficial do AR.JS.
Você pode instalar o AR.JS com o NPM e usar em qualquer projeto compatível que suporte módulos NPM (React.js, Vue.js, Next.js ou Whatelse), para instalá -lo executado:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Para alguns exemplos, leia este problema.
ar-threex.mjs e ar.mjs Com as atualizações mais recentes (3.4.6), three.js agora pode ser importado usando a sintaxe do módulo ES. Para se alinhar com este padrão, ar-threex.mjs , ar.mjs e ar-threex-location-only.mjs também devem ser importados da mesma maneira usando um mapa de importação. Aqui está um exemplo de como importar esses módulos em seu projeto:
// 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 >Leia os exemplos incluídos neste repositório para obter mais informações, mas basicamente a única alteração é a sintaxe de importação.
Você pode encontrar muita ajuda nos problemas antigos dos repositórios do AR.JS. Pesquise em questões abertas/fechadas, você pode encontrar coisas interessantes.
Desde a abertura de um relatório de bug até a criação de uma solicitação de tração: toda contribuição é apreciada e bem -vinda. Se você planeja implementar um novo recurso ou alterar a API, crie um problema primeiro. Dessa forma, podemos garantir que seu precioso trabalho não seja em vão.
Se você estiver tendo problemas de configuração ou configuração, publique uma pergunta para StackOverflow. Você também pode abordar a pergunta para nós em nossa sala de chat gitter
Se você descobriu um bug ou tem uma sugestão de recursos, fique à vontade para criar um problema no Github.
Depois de receber algum feedback, empurre o garfo e envie uma solicitação de tração. Podemos sugerir algumas alterações, melhorias ou alternativas, mas para pequenas alterações, sua solicitação de tração deve ser aceita rapidamente.
Algumas coisas que aumentarão a chance de sua solicitação de tração ser aceita:
É tudo de código aberto ! O Artoolkit5-JS está sob licença LGPLV3 e permissão adicional. E todo o meu código no repositório AR.JS está sob licença do MIT. :)
Para detalhes legais, verifique a licença do ArtOolkit5-JS e a licença AR.JS.
Changelog completo: ar.js changelog
