パソコンで，マーカーベースの AR システムを動かしてみる（A-Frame, AR.js を使用）

【概要】

A-Frame と AR.js を用いて，パソコンでマーカーベースの AR を動かしてみる。所定の hiro マーカー（画像）をパソコンのカメラで撮影すると，それを読み取って３次元のオブジェクトが現れる。これを Web ブラウザで動かす。

【目次】

マーカーベースの AR システムを動かしてみる

【関連する外部ページ】

A-Frame: https://aframe.io
AR.js: https://github.com/AR-js-org/AR.js
参考：https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498

【サイト内の関連情報】

A-Frameを活用したVR・AR開発について

マーカーベースの AR システムを動かしてみる

カメラ付きのパソコンを準備する。

HTML ファイルを作成し，a.html のようなファイル名で保存する。

次のページに記載のサンプルプログラムのうち，マーカーベースの AR のものを使う（a-box を使うように変更し，A-Frame のバージョンを AR.js と対応するものに合わせている）。

https://ar-js-org.github.io/AR.js-Docs/#getting-started

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>marker AR</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <!-- NFTなし，マーカー＋位置情報対応版の AR.js を読み込む -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.7/aframe/build/aframe-ar.js"></script>
  </head>

  <body style="margin:0px; overflow:hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-box position="0 0.5 0" wireframe="true"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

試しに，Webブラウザで表示してみる。
カメラの使用の許可についての表示が出た場合には許可する。

カメラ画像が現れるので確認する。
次の URL から，マーカー画像 hiro.png をダウンロードし，パソコンの画面に表示する。
https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png
先ほどの HTML ファイルでは，マーカーを「hiro」に設定していた。
カメラで マーカー画像 hiro.png を撮影すると，箱が現れるので確認する。