どうも、最近ジムプールでバタフライしていたら、隣レーンで歩いているおばあちゃんに「波が大きくて、いい運動になるよ~~~」と高齢者に負荷をかけて健康促進に貢献している@SeaaaManです。
いました!犯人こいつです！
改めて
タイトル通りです。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 の世界へようこそ！ ３歩でわかる お手軽 拡張現実