More than 3 years have passed since last update.

AR.jsを使って狼を表示してみた【初めてのAR】

AR.js

Last updated at 2021-09-02Posted at 2021-08-31

今週はAR.jsに挑戦してみました。

以下を作ります。

DEMO: https://yuikoito.github.io/ar-sample/
github: https://github.com/yuikoito/ar-sample

セットアップ

今回作るにあたって、以下のドキュメントを読みました。

AR.jsには主に以下の3つのタイプがあります。

Image Tracking..特定の画像を認識して、その上にモデルを表示する
Location Based AR..特定の場所にモデルを表示する
Marker Tracking..特定のマーカーの場所にモデルを表示する

今回使っているのはMarker Trackingです。

どのタイプを使うかによって、インポートしないといけないものが微妙に異なります。
今回はMarker Trackingを使うので、以下だけインポートします。

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

これでARが使えるようになるみたいです。簡単！

独自のマーカーをセットする

マーカーは色々あって、予めセットされているhiroというマーカーだったら、

<a-marker preset="hiro">

と書くだけでセットできるぽいです。

今回は独自のマーカーを使いたかったのでhttps://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html にアクセスして作ります。

とはいえちゃんとしたのを作るのも面倒なのでアクセスしたままのAR.jsと表示のあるマーカーをつかうことにします。（全然独自じゃない..）

ダウンロードしたマーカーをassetsフォルダ配下においてセットします。

<a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt">
  // この中に表示するモデルをセットする
</a-marker>

独自のモデルを表示する

独自のモデルがない場合でも、a-textでテキストを表示できたり、a-boxで箱が表示できたりするので、予め用意されているもので遊ぶだけでも十分楽しそうです。

今回は、Free3Dから良い感じの狼をダウンロードしてきたので、それを表示するようにします。gltf形式のモデルなので、以下でidを指定します。

<a-entity gltf-model="#wolf"></a-entity>

モデルは予めa-assets内で読み込んでおきます。

      <a-assets>
        <a-asset-item
          id="wolf"
          src="assets/Wolf-Blender-2.82a.glb"
        ></a-asset-item>
      </a-assets>

これで表示ができるようになりました。

コードの全体像は以下です。
a-entity内のpositionやscale, rotationに関しては自由に設定してください。


  <body>
    <a-scene
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
    >
      <a-assets>
        <a-asset-item
          id="wolf"
          src="assets/Wolf-Blender-2.82a.glb"
        ></a-asset-item>
      </a-assets>

      <a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt">
        <a-entity
          id="model"
          gltf-model="#wolf"
          position="0 0 1"
          scale="1 1 1"
          rotation="0 -90 60"
        >
        </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>

あとがき

これで15週目の週イチ発信となりました。
初めてのAR（という名のサンプルを動かしただけ）でしたが、こんなに簡単に表示できて驚きです。

良ければこれまでの週イチ発信も見て下さい！
ではでは〜。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up