AR.js
3.4.6
이제 AR.JS의 첫 번째 커밋을 소유 할 수 있습니다! Opensea
AR.JS는 이미지 추적, 위치 기반 AR 및 마커 추적과 같은 기능이 제공되는 웹에서 증강 현실을위한 경량 라이브러리입니다.
30/12/21 업데이트 : 이제 Mindar라는 새로운 OSS 웹 AR JS 라이브러리가 있습니다. 훌륭한 이미지 추적 기능 (다중 이미지 추적)과 얼굴 추적이 필요한 경우 확인하십시오!
현재 AR.JS는 여전히 마커 기반 및 위치 기반 AR 기능을 제공하는 유일한 라이브러리입니다.
이 프로젝트는 이전에 Nicolò Carpignoli에 의해 관리 된 @jeromeetienne에 의해 만들어졌으며 현재 AR.JS Org에 의해 유지됩니다.
AR.JS에 대한 빈번한 업데이트는 @The 공식? (Twitter) 계정을 따르고이 repo를 볼 수 있습니다!
로고는 Simon Poulter가 제공합니다.
AR.JS 잠재력을 먼저 살펴보고 싶다면이 readme를 계속할 수 있습니다.
AR.JS는 다른 빌드에서 나옵니다. 둘 다 유지됩니다. 그들은 독점적입니다.
둘 다가 아니라 프로젝트에 필요한 것을 가져 오십시오.
이미지 추적 + 위치 기반 AR (Aframe)이있는 A.JS :
마커 추적 + 위치 기반 AR (Aframe)이있는 AR.JS :
이미지 추적 + 마커 추적 (ThreeJS)이있는 AR.JS :
ARJS 네임 스페이스 가져 오기 AR.JS가 필요한 경우 :
위치 기반 AR (ThreeJS)이있는 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 오류가 있는지 확인하십시오. 그렇다면 콘텐츠를보기 위해 오류를 해결해야합니다. 올바른 수정은 리소스를 코드의 동일한 서버에 배치하는 것입니다.
그렇게 할 수 없다면 프록시 어디에서 서버를 호스팅하여이를 해결할 수 있습니다 (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 >자세한 내용은이 저장소에 포함 된 예제를 읽으십시오. 그러나 기본적으로 유일한 변경 사항은 Import Syntax입니다.
이전 AR.JS 리포지토리 문제에 대한 많은 도움을 찾을 수 있습니다. 열린/폐쇄 문제를 검색하십시오. 흥미로운 내용을 찾을 수 있습니다.
버그 보고서를 열는 것부터 풀 요청 생성에 이르기까지 : 모든 기여도에 감사하고 환영합니다. 새로운 기능을 구현하거나 API를 변경하려는 경우 먼저 문제를 만듭니다. 이런 식으로 우리는 당신의 소중한 일이 헛되지 않도록 할 수 있습니다.
구성 또는 설정 문제가있는 경우 StackoverFlow에 질문을 게시하십시오. 또한 Gitter Chatroom에서 우리에게 질문을 해결할 수도 있습니다.
버그를 발견했거나 기능 제안이 있다면 Github에서 문제를 해결하십시오.
피드백을받은 후 포크로 밀고 풀 요청을 제출하십시오. 우리는 몇 가지 변경 또는 개선 또는 대안을 제안 할 수 있지만 작은 변경의 경우 풀 요청을 신속하게 수락해야합니다.
풀 요청이 수락 될 가능성을 높이는 몇 가지 사항 :
모두 오픈 소스 입니다! ArtoolKit5-JS는 LGPLV3 라이센스 및 추가 권한에 따라 있습니다. AR.JS 저장소의 모든 코드는 MIT 라이센스 아래에 있습니다. :)
법적 세부 사항은 ArtoolKit5-JS 라이센스 및 AR.JS 라이센스를 확인하십시오.
Full ChangeLog : AR.JS ChangeLog
