체소 예술 네트워크 전조 현실(WebAR)

몸소

이 프로젝트에 대해 AR.js와 Aframe을 사용했습니다.js 라이브러리, 이미지 설명자, 체소.
https://github.com/MaksumRifai/voxelar(재구매)|https://maksumrifai.github.io/voxelar(현장)
Chrome Mobile Browser 또는 AR/VR/XR 장치를 사용하여 라이브 데모를 열고 cam이 준비되면 BekasiDev의 태그나 로고를 스캔합니다.또는 아래의 그림을 사용할 수 있습니다.

참고: 데스크톱 브라우저의 경우 WebVR 경험을 지원하는 최신 Chrome이나 Edge, 그리고 좋은 데스크톱 카메라(인터넷 카메라)가 필요하므로 모바일 브라우저를 사용하는 것이 좋습니다.

도서관.

AR.js

js는 경량급 웹 증강현실 라이브러리로 이미지 추적, 위치 기반 AR와 태그 추적 등의 기능을 갖추고 있다.

한 대.js

가상 현실 환경을 위한 웹 프레임워크

라이브러리 가져오기

AR.js 가져오기

<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">

프레임을 가져옵니다.js:

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>

이 예에서는 이미지 추적 유형 AR.js를 Aframe과 함께 사용합니다.js.
Further Reading AR.js 공식 문서의 다른 유형을 가져옵니다.

이미지 추적

네이처 피쳐 추적(NFT)은 QR 코드나 Hiro 태그 대신 이미지를 사용할 수 있는 기술이다.
그것은 두 가지 버전이 있다. the Web version (추천) 과 node.js version.

선택한 그림

태그의 생성에 대해 더 깊이 알고 싶으면 NFT 태그 작성자wiki를 보십시오.이것 또한 왜 어떤 그림이 다른 그림보다 더 잘 작동하는지 설명한다.한 가지 중요한 요소는 이미지의 DPI이다. 좋은 DPI(300 이상)는 매우 좋은 안정성을 제공할 것이고 낮은 DPI(예를 들어 72)는 사용자에게 매우 정지하고 이미지에 접근하도록 요구할 것이다. 그렇지 않으면 추적이 지연될 것이다.

이미지 설명자를 만들려면 다음과 같이 하십시오.

위의 NFT creator 웹 버전에 업로드하여 이 사진(photo.jpg)으로 설명자를 만들고 사용할 파일 3개를 되돌려줍니다.fset.fset3.네.
그것들 중 하나는 파일 확장자 앞에 같은 접두사를 가지고 있다.이것은 AR.js 웹 응용 프로그램에서 사용할 이미지 설명자 이름입니다.예: 사진이 있는 파일입니다.fset, 사진.fset3 및 사진.iset, 그림 설명자 이름이 사진입니다.

객체 작성

3D 모델이나 객체를 다운로드하여 사용할 수도 있고 Blender를 사용하여 자체 모델이나 객체를 만들 수도 있습니다.이번 리콜에 대해Magica Voxel은 Bekasidev 로고를 기반으로 자신의 모델을 만들었고 이 로고의 벡터와 울타리도 제가 최초로 만들었습니다.

DTS Kominfo 로고의 자습서는 내 유튜브 채널에서 볼 수 있습니다.

장면으로 내용 렌더링

<!-- Main Scene -->
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/photo"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
    <!-- as a child of the a-nft entity, you can define the content to show. here's a OBJ model entity -->
    <a-entity rotation="-135 -90 90" scale="5 5 5" position="0 0 0" obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
    </a-nft>
    <!--Load assets to use by nft entity above-->
       <a-assets>
        <a-asset-item id="tree-obj" src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/bekdev.obj"></a-asset-item>
        <a-asset-item id="tree-mtl" src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/bekdev.mtl"></a-asset-item>
       </a-assets>
    <!--End of assets-->
    <!-- static camera that moves according to the device movemenents -->
    <a-entity camera></a-entity>
  </a-scene>
  <!--End of Scene-->

내용 및 사용자 정의에 대한 모든 정보는 A-Frame docs를 참조하십시오.형상, 3D 모델, 비디오 및 이미지를 추가할 수 있습니다.위치, 배율, 회전 등을 사용자 정의할 수 있습니다.
여기서 유일한 사용자 정의 구성 요소는 a-nft, 즉 이미지 추적 HTML 닻입니다.너는 나의 다른 항목을 참고할 수 있다.

360도 이미지 가상현실, 360도 이미지에 3D 버스 추가Repo|Demo

단순 개체 및 애니메이션 VR, 환경에 3D DTS 로고 추가Repo|Demo

Kumparan 로고 우산이 있는 WebAR 이미지 추적Repo|Demo

템플릿 사용 방법

클론 복제

다음 명령을 실행하여 이 템플릿을 로컬 디렉토리로 복제합니다.

$ git clone https://github.com/MaksumRifai/voxelar.git

다운로드

"내 재구매"의 녹색 버튼을 사용하여 "Zip 다운로드"를 클릭하거나 here만 클릭하면 됩니다.

맞춤형 구성

자신의 모델을 사용하려면 .obj .mtl .png 파일을 당신의 것으로 바꾸십시오.MagicaVoxel 또는 Blender 항목을 올바르게 내보내는 것을 잊지 마십시오.
이 리포를 편집하려면 URL/파일 이름을 URL/파일 이름으로 바꾸고 원본 이미지로 만든 설명 파일 (fset, iset, fset 3) 을 웹 브라우저나github 데스크톱에서 가장 좋아하는 코드 편집기를 사용하십시오.