WebARをやってみました - 日々是好日～every day is a good day～

ARの勉強をサボっている間もたまに情報収集はしておりまして
「WebAR」というものが良さそうな感じです
WebARはA-FrameとAR.jsというライブラリを使うことで簡単にできるらしく
まずはこちらの動画を参考にしながらWebARに初挑戦
www.youtube.com
aframe.io
ar-js-org.github.io
glitch.com
これをすこーしだけ変更して３Dモデルを表示するようにしました

<html>
  <head>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden">
    <a-scene
      embedded
      arjs="patternRatio:0.80"
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
    >
      <a-assets>
        <a-asset-item
          id="crate-glb"
          src="glbファイルのURL"
        ></a-asset-item>
      </a-assets>
      <!-- マーカーの.pattファイルを読み込む -->
      <a-marker
        type="pattern"
        url="マーカーのpattファイルのURL"
      >
        <!-- 3Dモデルを呼び出す -->
        <a-entity
          gltf-model="#crate-glb"
          animation-mixer
          position="0 0 0.65"
          scale="1.2 1.2 1.2"
          rotation="-90 0 0"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>