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

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

以下を作ります。

[![Image from Gyazo](https://i.gyazo.com/a564241c6d870ff2d7d962324ae653f4.gif)](https://gyazo.com/a564241c6d870ff2d7d962324ae653f4)

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

## セットアップ

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

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

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

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

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

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

```html
  <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というマーカーだったら、

```html
<a-marker preset="hiro">
```

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

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

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

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

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

## 独自のモデルを表示する

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

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

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

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

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

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

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

```html

  <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（という名のサンプルを動かしただけ）でしたが、こんなに簡単に表示できて驚きです。

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

- [【React + Typescriptで顔認識】tensorflowを使って画像にマスクをかけるアプリを作った](https://qiita.com/Yui_active/items/b8062b9f89f72c6865ed)
- [【React + Typescript】ボタン一つでコンポーネントのscssをコピーできるサイトを作った](https://qiita.com/Yui_active/items/1288fed0dcc24c71e159)
- [【アップデート】ui-componentsに18個のコンポーネントを追加した](https://qiita.com/yuiko_ito/items/c1d0599e1e7da7fa42e0)
- [【Nuxt.js × Tailwind CSS】ボタン一つで有名絵画風の画像にできるサービスをリリースした！](https://qiita.com/yuikoito/items/126b0e2d36a707bfd36e)
- [【GASでLINE Bot作成】現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Botを作った](https://qiita.com/yuikoito/items/c1aef147cef4458f9d2e)
- [【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する](https://qiita.com/yuikoito/items/619120c592d99f9d3053)
- [【LambdaでOpenCVを利用】AWSとOpenCVを利用してポケモン画像でアスキーアート風に変換するAPIを作った](https://qiita.com/yuikoito/items/7dcf1deeed46f46b2f2e)
- [ポケモン画像でアスキーアート風に変換するwebアプリを作った](https://qiita.com/yuikoito/items/da5954a5d78da9de6a4e)
- [ボタン一つで漫画風の画像にできるサービスを作った](https://qiita.com/yuikoito/items/a76ea5bf05f04a44df8d)
- [【Next.js + TensorFlowでweb cameraにバーチャル背景をつける】バーチャル旅行を体験できるアプリを作った](https://qiita.com/yuikoito/items/bb9c40bbb673e4f71abe)
- [オリンピックを盛り上げるためにピクトグラムさんになれるアプリを作った【Next.js+TypeScriptでTensorFlow.jsを使って姿勢検出】](https://qiita.com/yuikoito/items/274f926b5c5e59b43ce9)
- [毎週アプリをリリースして3ヶ月経ったので振り返る](https://qiita.com/yuikoito/items/eede538b17d72685ea02)
- [【canvasで塗り絵機能を実装】画像からオリジナル塗り絵を作って塗り絵ができるアプリを作った](https://qiita.com/yuikoito/items/28510dff877e3e222ba5)