AR.jsでプレゼント配ってるやついる？いねーよな！


どうも、最近ジムプールでバタフライしていたら、隣レーンで歩いているおばあちゃんに「波が大きくて、いい運動になるよ~~~」と高齢者に負荷をかけて健康促進に貢献している@SeaaaManです。

[株式会社パーソンリンク　アドベントカレンダー14日目
](https://qiita.com/advent-calendar/2022/person-link)

## いました!犯人こいつです！
![スクリーンショット 2022-12-13 10.09.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678140/7188323c-b095-c900-9411-d530dead4952.png)

## 改めて
タイトル通りです。A-FrameフレームワークとAR.jsとを使用して、サンタさんらしき人がARでプレゼントを配ってましたね。配ってる風にしました。webARでBlenderとかで作成した3Dモデルを表示させてみたかったので、今回やってみました。

## 準備
- Netlity（サーバ）
- 3Dモデル（glbファイル）
- ARマーカー（patt, png）
- ホームアローン2


## 開発
### 1. 表示させたい3Dモデルをご用意
私は趣味がてら、blenderをいじってるので自作も可能でしたが、アドベントカレンダーのことを忘れていたに加え、これを読んでいる方も3Dモデル作れねーよ！！が大半だと思います。

なので、[CGtrader](https://www.cgtrader.com/ja)という、3Dモデルの販売（無料もあり）所でデータをダウンロードして使用しようと思います。（Not 商用）

今回はこちらを使用！
![スクリーンショット 2022-12-12 16.22.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678140/bc5ca774-4d4d-5fe0-b5ab-9cd0733842ea.png)


### 2. QRコードを用意（サンタページ用）
私は今回、[QR Code Generater](https://app.qr-code-generator.com/)でテンプレートのwebページを作成して、QRコードを発行しました。間違えないで欲しいのは、webページは「サンタ」のやつです。


### 3. AR.js Marker Trainingで「ARマーカー」を用意
ARマーカーを作るなら、[AR.js Marker Training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)です。
2で作成したQRコードをuploadして、「DOWNLOAD MARKER」でpattファイルをダウンロード、「DOWNLOAD IMAGE」でpngファイルをダウンロードしてください。
上記が、ブラウザで3D表示させるARマーカーとなります。

### 4. AR.jsでブラウザを用意
```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- A-Frameのバージョンをドキュメントで確認してください。現在は1.3.0が最新。　私は1.2.0を使用 -->
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <!-- Ar.jsはAR.js with Marker Trackingを読み込んでください。ドキュメントにあります。 こちら-->
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    </head>
    
    <body style="margin: 0; overflow: hidden">
        <a-scene embedded arjs="patternRatio: 0.5" vr-mode-ui="enabled: false">

        <!-- ここで1で準備した3Dモデルを読み込む -->
        <a-assets>
            <a-asset-item id="gift_box" src="./assets/gift_box.gltf"></a-asset-item>
        </a-assets>

        <!-- 3で作成したARマーカーの.pattファイルを読み込む  -->
        <a-marker 
            type="pattern" 
            preset="custom" 
            url="./assets/pattern-gift_box.patt">
            
            <!-- 3Dモデルを呼び出す -->
            <a-entity gltf-model="#gift_box"></a-entity>
        </a-marker>

        <!-- a-frameのカメラコンポーネントでカメラを追加（ドキュメント読んでね） -->
        <a-entity camera></a-entity>
    </a-scene>
    </body>
</html>

```

### 5. Netlifyサーバーでファイルアップ
作成したプロジェクトファイルをサーバにアップします。今回はNetlityでデプロイします。私は、githubで連携しましたが、Netlityは直でファイルアップロードできるので、使う人はお好きに！
![スクリーンショット 2022-12-13 11.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678140/d5ab5471-73e5-ea1f-1f1a-b5ac567740cf.png)


### 7. Let's AR!
画質が荒いクリスマスを!
ホームアローン2見る時間なので失礼します。

<img width="600" alt="webAR_gift_box.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678140/56924b39-3500-8d4f-07a9-ed20594c9839.gif">


## 参考
[Document A-FRAME](https://aframe.io/docs/1.2.0/introduction/)
[Document Ar.js](https://ar-js-org.github.io/AR.js-Docs/)
[ペルソナ玲音を召喚するARをA-Frameで作る](https://ysko909.github.io/posts/make-ar-with-a-frame-and-gltf/)
[AR.js の世界へようこそ！ ３歩でわかる お手軽 拡張現実](https://qiita.com/dsudo/items/58718e9e3c870e6b92e6)