【AR.js】ただ「もねたん」になる服が作りたかった…

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/5ff7f519-dfcf-0b3b-43e7-74e4d94f3ccd.gif" width="300px">

みなさんこんにちは。
まずはこちらをご覧ください。

![Screen Shot 2018-11-13 at 21.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/6404f416-1f12-77e2-e687-13c5139e365a.png)
こちらは著者が5秒で考えたシロクマのキャラクター「もねたん」です。
今日はAR.jsを使ってもねたんになれる服を作ろうと思います。

*あの頃の俺たちはただ…「もねたん」になりたかったんだ…*

（この記事からはあまり有用な情報は得られません）

# そもそもAR.jsとは

AR.jsはシンプルなコードで手軽にWebARを実現できるライブラリです。
マーカーを使ったwebARの例をよくみますね。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/e3e79097-d81d-2a84-669b-137fa2428698.jpeg" width="400px">
（画像：[AR.js公式](https://github.com/jeromeetienne/ar.js)より）

マーカーレスARも作れます。
参考記事： [A-FrameとAR.jsでマーカーレスWebAR](https://qiita.com/Damien/items/adca96f2e0b559e5671b)

# 用意するもの

用意するものはこちら

- aframeライブラリ
- AR.jsライブラリ
- カスタムARマーカー
- もねたんの頭の3Dモデル
- 無地のTシャツ

実際に作り方をみていきましょう！

# 1. 必要なライブラリを読み込む

index.htmlのheaderで以下のように**aframe**と**AR.js**のライブラリを読み込みます。

```html:index.html
<head>
    <title>🐻</title>
    <meta charset="utf-8" />
    <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
```

[aframe](https://aframe.io/)と[AR.js](https://github.com/jeromeetienne/ar.js)の公式ドキュメントでそれぞれ最新版をご確認ください。


# 2. カスタムARマーカーを用意する
AR.jsには、任意の画像でマーカーを作成できるページが用意されているので
好きな画像をマーカーにしましょう！

[AR.js Marker Training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)

1. **UPLOAD**で好きな画像をアップロードする※1
2. Pattern RatioとImage sizeのつまみを任意で調整する※2
3. **DOWNLOAD MARKER**で.pattファイルを、**DOWNLOAD IMAGE**で.pngファイルをダウンロードする
4. **.pattファイル**をプロジェクトのディレクトリに入れる


※1: 上下左右非対称で、文字などのちょっと複雑な模様の画像がおすすめです
上下左右対称だとどちらが正面かの認識ができず、たまにモデルのrotationが狂います
※2: こちらを調整すると画像と枠の比率を調整できます。
ARマーカーのデザインにこだわる方は調整してもOKですが比率によってマーカーの認識が安定しない場合もありますので注意

今回のもねたん服にはこちらのARマーカーを使いました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/9653bdf8-afbb-7022-49c6-db730b2f5eb0.png" width="300px">
(特徴量が少ないし遠距離だと余計わからないのでこれは正直よくない)

# 3. html内でマーカーと表示する3Dモデルを追加

先ほどダウンロードした.pattファイルのARマーカーと、
そのマーカーを認識した時に表示する3Dモデルも追加します。

```html:index.html

<body>
    <a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;" vr-mode-ui="enabled: false" >
      <a-assets>
        <!-- a-assets内で表示させたいobjモデルを登録 -->
        <a-asset-item id="mone-obj" src="assets/src/mone-head2.obj"></a-asset-item>
        <a-asset-item id="mone-mtl" src="assets/src/mone-head2.mtl"></a-asset-item>
      </a-assets>

      <!-- a-markerタグで.pattのARマーカーを呼ぶ -->
      <a-marker preset="custom" type="pattern" url="assets/src/black.patt">
        <!-- a-markerが認識された時に表示するものを子要素にしておく -->
        <a-entity id="mone" obj-model="obj:#mone-obj; mtl:#mone-mtl" position="0 0 -5" scale="10 10 10" rotation="0 -90 60">
        </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
```

はい、こんな感じです。

今回の場合、頭用の3Dモデルがちょうど自分の頭部分に来るようにpositionやrotationを調整するのがミソです。


# 4. 服にARマーカーを貼る
2でダウンロードしたpngのARマーカーを印刷してTシャツに貼りましょう！（？）
![IMG_7338.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/f148a446-44c0-9e5a-bdbf-ff4baa5d4580.jpeg)
シワシワ

# 5. 遊ぶ
は〜いできあがり！
ヤッター！🎉🎉🎉
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/84cf92d1-c3c3-4d14-338b-14d5b96e3f32.gif" width="400px">

目とかが点滅してるのは自作の3Dモデルのマテリアル設定が悪いためです。
出来はさておき、これでもねたんになる服の完成です！！

## おまけ
応用するとこういうのもできます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306452/acfcec2e-9478-7d55-71df-02e1e939f343.gif" width="400px">

天使の羽とリングを配置してみました。
ちなみに、背中に貼ったARマーカーの手前へ黒いplaneオブジェクトを置いてマーカーを隠しています。
見栄え的にはマーカー見えてないほうが良きですね。


皆さんもお気に入りの3Dモデルを使って人造人間WebAR作ってみてください！！