오리지널 AR 태그 만들기

9535 단어 HTMLAR.jsA-Frame

하는 일


오리지널 AR 로고 만들기, AR로 놀기

웹 페이지 정보


나는 이 사이트를 참고했다.
  • AR.js에서 원래 태그를 설정하는 방법
  • 자바스크립트:AR.js로 연하장을 만들어 보세요.

    • AR 샘플 준비


    AR은 익숙한 Hiro 태그로 실행되는 웹 사이트를 제공합니다.

    소스 예제를 보려면 여기를 클릭하십시오.
    sampleAFrame-AR.html
    <!DOCTYPE html>
<html class=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>sample</title>
    <body style="margin: 0px 0px 0px 126.5px; overflow: hidden;">
        <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
    <a-scene embedded="" arjs="trackingMethod:best; debugUIEnabled:false;" class="" canvas="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="">
      <a-marker preset="hiro" position="" rotation="" scale="" visible="" material="" arjs-anchor="" arjs-hit-testing="">
        <a-box position="0 0.8 0" wireframe="false" color="#843233" rotation="" scale="" visible="" material="" geometry="" src="" width="0.7" height="0.7" depth="0.7" >
          <a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"></a-animation>
        </a-box>
    </a-marker>
    <a-entity camera="" position="" rotation="" scale="" visible=""></a-entity>
    <canvas class="a-canvas" data-aframe-canvas="true"></canvas>
    <a-entity light="" data-aframe-default-light="" aframe-injected="" position="" rotation="" scale="" visible=""></a-entity>
    <a-entity light="" position="" data-aframe-default-light="" aframe-injected="" rotation="" scale="" visible=""></a-entity>
  </a-scene>
</body>
</html>
    이렇게 3D 객체를 표시하면 성공합니다.

    제작


    다행히도 생성기 사이트가 있다.제가 이곳을 사용할 수 있도록 허락해 주세요.
  • AR.js Marker Training
    • UPLOAD AR 태그가 될 이미지를 버튼으로 업로드합니다.
    DOWNLOAD MARKER 및 DONWLOAD IMAGE 버튼을 사용하여 AR 태그와 AR 태그의 모드 파일을 다운로드합니다.

    다음 파일을 다운로드할 수 있습니다.
  • pattern-test.png
  • pattern-test.patt

    • sampleaFrame-AR.html 수정


    SampleaFrame-AR.html을 수정하고 모드 파일을 설정합니다pattern-test.patt.pattern-test.patt를 같은 레이어(같은 폴더)에 저장하고 다음과 같이 수정합니다.
    <!-- 変更前 -->
<a-marker preset="hiro" position="" rotation="" scale="" visible="" material="" arjs-anchor="" arjs-hit-testing="">
<!-- 変更後 -->
<a-marker type="pattern" url="pattern-test.patt">
    이로써 원래 AR 태그 설정이 완료되었습니다.

    동작 확인

    sampleAFrame-AR.html에 3D 객체를 표시하면 성공합니다.

    ※ 경품※
    저희가 AR 마크를 몇 개 해서 검증을 해봤어요.
    → 어떤 AR 마크를 인식할 수 있는지 한번 해봤어요.

    [백준] 2798번 : 블랙잭
    네가 알아야 할 JS 네이티브 오류 7개 유형

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage