2023/11/15追記）コードが一部古くなっていたので修正
「尊い…！」と叫びたい！けど叫べない！
人生では推しを目の前にすると感極まって「尊い…！」と叫びたくなる瞬間がある。
けれど現実に叫ぶのは難しい。なんなら文字で叫びたい。そう思い、ARアプリを作った。
尊いAR
＜使い方＞
1. アプリを起動
2. hiroマーカーを映す
3. 「「「「「 尊い！！！ 」」」」」
コード
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- hiroマーカーが認識されたら -->
<a-marker preset="hiro">
<!-- 「尊い…！」を表示します -->
<a-entity
position="0 1 -2"
scale="5 5 5"
gltf-model="https://cors-anywhere.herokuapp.com/[作成した3Dモデルのリンク]">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
画像の表示
<a-marker preset="hiro">
<!-- 「尊い…！」を表示します -->
<a-entity
position="0 1 -2"
scale="5 5 5"
gltf-model="https://cors-anywhere.herokuapp.com/[作成した3Dモデルのリンク]">
</a-entity>
</a-marker>
position="0 1 -2" ARで表示させる画像の位置を指定したい場合、数字を変更させる。
scale="5 5 5" ARで表示させる画像の大きくしたい場合、数字を変更させる。
3Dモデルを作る
●ペイント3D
Windows標準ソフトのペイント3Dを起動。
参考記事はこちら。
吹き出しを描く
「ブラシ」を選択。
漫画とかでよく見かける心理描写の時の吹き出し、ウニフラッシュを適当に描く。ARにしたときにごまかせるので、雑で問題なし。真ん中の余白は、白で塗りつぶす。
文字を入れる
「テキスト」を選択。
文字を入力。右のテキスト項目（2Dか3D）を選択して、表示させたい文字を入力する。
ここを選択しないと、文字が入力できないがテキストボックスを閉じると選択解除されるので、都度選択する必要がある。
横書きしか入力できないので、縦書きにしたい場合は一文字ずつ入力して縦書き風に配置する。
三点リーダー「…」は横に並んでしまうので、テキストボックス上部に出る
マークを選択して文字を回転させる。
今回は漫画っぽさを出したかったので、漢字をゴシック体、ひらがなを明朝体にした。
透過設定をする
「キャンバス」を選択。
「透明なキャンパス」をオンにする。オンにしないと、白背景の四角が表示されてしまうので、描いたものだけを表示させたい場合は必ずオンにすること。
画像を回転させる
「選択」から、描いた画像を選択。
右のを選択して、ARマーカーに対して表示したい角度に設定する。
回転させた画像を確認したい場合は、「3D表示」から確認する。
尊いARはマーカーを置いて使う想定なので、斜め上からマーカーを読み取った場合にいい感じに文字が読めるように角度を付けて設定。（適当）
保存する
ショートカット[ctrl]+[s]を押す。
保存形式が表示されるので、「3Dモデル」を選択。
ファイルの種類が、3D-GLB(*.glb)であることを確認して保存する。
3Dモデルをアップロードする
Firebaseにログインし、storageを選択。
「⬆ファイルをアップロード」から、先ほど作成したファイルを選択してアップロードする。
アップロードが完了したら、Firebase上でファイルを選択。
右に表示された名前を右クリックして、「リンクのコピー」を選択。
コピーしたURLをコード内の、[作成した3Dモデルのリンク]の部分に張り付けて、完了。
まとめ
漫画っぽさを残したかったので、立体感のないモデルを3Dで作った。
めちゃめちゃ楽しい。
10分くらいで手軽にARを作れたので、楽しすぎてずっとARアプリを作ってしまう。無限に遊べる。