1. AR 시뮬레이션 게임 앱 만들기

우리는 표지를 바탕으로 교통수단의 대상을 표시하고 시뮬레이션 게임을 할 수 있는 프로그램을 만들었다.
아이고, 대단하다.(병)

제작 당초 건축물 배치도 기호를 토대로 고려했으나 교통수단용 기호에 숨겨져 있어 놀기 어려워 건축물용 기호를 확인하면서 무기호 생성 대상의 처리를 검토했다.

2. 사용된 자산이 등록될 때까지

먼저 구글 폴리에서 페이킹을 검색해 자산을 다운로드한 뒤 obj 파일과 mtl 파일을 프로젝트 폴더 안에 있는 obj 폴더에 저장한다.

이번엔 index.파일에 기록하다.
AR.js의 사용에는 A-Frame이 필요하기 때문에 바디 요소에서 미리 읽습니다.
index.html

<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

a-scene 요소 중embedded arjs="debugUIEnabled:false;속성을 추가합니다.이렇게 하면 A-Frame과 AR.js를 연결할 수 있습니다.
더구나<a-asset-item id="parkingObj" src="obj/parking/parking.obj">
<a-asset-item id="parkingMtl" src="obj/parking/parking.mtl">에 사용되는 obj 파일과 mtl 파일의 경로입니다.
index.html

<a-scene id="scene" embedded arjs="debugUIEnabled:false;">
  <a-asset-item id="parkingObj" src="obj/parking/parking.obj">
  </a-asset-item> 
  <a-asset-item id="parkingMtl" src="obj/parking/parking.mtl">
  </a-asset-item>
<a-scene>

이렇게 하면 라이브러리와 3D 개체를 사용할 수 있습니다.
다음 태그는 태그 없이 객체를 배치하는 데 사용됩니다.
a-marker 요소에 사용되는 기호(이번에 미리 설정된 Hiro 기호 사용)와 식별 기호를 사용할 때 처리합니다..
index.html

<a-marker preset="hiro" id="island" registerevents></a-marker>

a-scene의 마지막 부분에camera를 추가합니다.
index.html

<a-entity camera></a-entity>

준비 끝!그리고script 요소에 검사할 때의 처리를 표시합니다.

3. 표시를 검사할 때의 처리

마지막으로 검사 표시를 쓸 때의 처리입니다.
index.html

AFRAME.registerComponent('registerevents', {
  init: function () {
  var marker = this.el;
  // 以下、マーカーを検出時のイベント
  marker.addEventListener('markerFound', function () {
    var markerId = island.id;
    //a-obj-model要素を生成する
    let parkingIns = document.createElement("a-obj-model");
    parkingIns.id = "parkingIns";
    let scene = document.getElementById("scene");
    //a-obj-modelをa-sceneに追加する
    scene.appendChild(parkingIns);
    //objファイルとmtlファイルをa-obj-model要素に追加する
    parkingIns.setAttribute("src", "#parkingObj");
    parkingIns.setAttribute("mtl", "#parkingMtl");
    //position、scale、positionの設定
    parkingIns.setAttribute("position", "0 0 -0.07");
    parkingIns.setAttribute("scale", "0.01 0.01 0.01");
    parkingIns.setAttribute("rotation", "0 270 -20");
    });
  }
});

자산의 원래 설정이 이상하기 때문에position,scale,rotation이 이상해졌어요...
완성!

너무 좋아!!
이렇게 하면 마커를 이동해도 객체가 동일한 위치에 배치됩니다.