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

株式会社パーソンリンク　アドベントカレンダー14日目

いました!犯人こいつです！

改めて

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

準備

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

開発

1. 表示させたい3Dモデルをご用意

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

なので、CGtraderという、3Dモデルの販売（無料もあり）所でデータをダウンロードして使用しようと思います。（Not 商用）

今回はこちらを使用！

2. QRコードを用意（サンタページ用）

私は今回、QR Code Generaterでテンプレートのwebページを作成して、QRコードを発行しました。間違えないで欲しいのは、webページは「サンタ」のやつです。

3. AR.js Marker Trainingで「ARマーカー」を用意

ARマーカーを作るなら、AR.js Marker Trainingです。
2で作成したQRコードをuploadして、「DOWNLOAD MARKER」でpattファイルをダウンロード、「DOWNLOAD IMAGE」でpngファイルをダウンロードしてください。
上記が、ブラウザで3D表示させるARマーカーとなります。

4. AR.jsでブラウザを用意

<!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は直でファイルアップロードできるので、使う人はお好きに！

7. Let's AR!

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

参考

Document A-FRAME
Document Ar.js
ペルソナ玲音を召喚するARをA-Frameで作る
 AR.js の世界へようこそ！３歩でわかるお手軽拡張現実