【推しを愛でるプロジェクト第2弾】バイクと推しキャラをWeb上ARカメラで立体表示してみた #推し活 #バイク好き

ゲームセンターでゲットしたフィギュアたち。大切に！大切に！クリアケースに入れて飾っています。
そんな毎日視界の中に入る推しキャラのフィギュアたち。
<font color="#ff0000">**推しキャラで何かしたい！**</font>&<font color="#ff0000">**バイクとコラボしたい！**</font>そんな気持ちが具現化いたしました。
（バイクの燃料タンク上に表示させるのが最終目標なんですが！）

:sparkles::two_hearts:<font color="#ff0000">**バイクと推しのフィギュアをARカメラで立体表示させました**</font>:two_hearts::sparkles:

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">朝から3Dモデル修正したりで朝活を楽しんだ！<br>今日もがんばりましょ～！<br><br> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%84%E3%82%A4%E3%82%B9%E3%83%86?src=hash&amp;ref_src=twsrc%5Etfw">#ツイステ</a> <a href="https://twitter.com/hashtag/%E3%83%90%E3%82%A4%E3%82%AF%E5%A5%BD%E3%81%8D?src=hash&amp;ref_src=twsrc%5Etfw">#バイク好き</a> <a href="https://twitter.com/hashtag/%E3%83%90%E3%82%A4%E3%82%AF%E5%A5%B3%E5%AD%90?src=hash&amp;ref_src=twsrc%5Etfw">#バイク女子</a> <a href="https://t.co/HuOn1N1QRr">pic.twitter.com/HuOn1N1QRr</a></p>&mdash; yui-ko◆バイクに特化したアプリ制作予定 (@yui8686kouy) <a href="https://twitter.com/yui8686kouy/status/1468729186278064129?ref_src=twsrc%5Etfw">December 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 立体表示したいモデルの準備

## ペイント3Dで表示したいモデルの写真を準備する
Windows10に装備装備されている**ペイント3D**を使います。
作り方は以下リンクを参考にしました。

https://qiita.com/yamad365/items/49a365646b7d0a9a6512

使用する画像は、自分のバイク写真と、以前のオルゴール化プロジェクトで使用したフィギュアの写真を使います。

|バイク|推しフィギュア|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/9d28ede9-c2f8-9ebf-abe3-e6b7b5a15b7d.jpeg" width=70%>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/3e64c51f-ffa9-1f68-5ec0-90b1da039cff.jpeg" width=70%>|

フィギュアの方は知らない方が大勢だと思いますが、**「[TWISTED WONDERLAND](https://twisted-wonderland.aniplex.co.jp/)」**という**Disney**のほぼフルボイスのスマホアプリに登場するキャラクターたちです。

オルゴール化プロジェクトの内容はこちらからご一読いただけると嬉しいです。

https://qiita.com/yui-kouy/items/d7959be61262a714833f

## ペイント3Dで立体加工する
画像を取り込み、必要なところだけ抜き出し、背景を削除するという作業をします。

マジック選択というところでキャラクターだけを抜き出します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/a2a4e877-488f-2f65-80a2-78e4dfb28eb6.png" width=70%>

キャラクターだけ抜き出すとこんな感じで動かすことができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/4ffc641d-7de2-bd31-398f-1258edfd696d.png" width=70%>

バイクとそれぞれのキャラクターを合体させていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/b69672d1-5d7c-feb9-28c4-405c7eafde0d.png" width=70%>

##Google Firebaseへアップロードする
ペイント3Dで加工したARモデルファイルをGoogle Firebaseへアップロードして使用します。
Google Firebaseの始め方、アップロードの方法は以下リンクを参考にしました。

https://qiita.com/kohashi/items/43ea22f61ade45972881

https://qiita.com/deruta1992/items/90d6a995e7bae8b4b5a3

# 処理コード
処理コードは折り畳み、部分説明いたします。
Hiroマーカーを使って認識する仕様です。マーカーについては以下サイトより見ることができます。

https://www.techpit.jp/courses/55/curriculums/58/sections/470/parts/1613

<details><summary><font color="#ff0000">全体コードはこちら（クリックで開きます）</font></summary><div>

```HTML
<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">
      <!-- ボックスを表示します 　position=場所、scale=大きさ、rotation=角度、height=高さ -->
       <a-entity
          position="0 -2 0"
          scale="1.5 1.5 1.5"
          rotation="0 0 0"
          height="-1"
          gltf-model="https://arjs-cors-proxy.herokuapp.com/[https://firebasestorage.～アップロードしたモデルURLへ差し替え]">
      </a-entity>
    </a-marker>
      <a-entity camera></a-entity>
  </a-scene>
</body>
```

</div></details>

## WebARカメラでhiroマーカーを認識したら

```html
    <!-- hiroマーカーが認識されたら -->
    <a-marker preset="hiro">
```

<details><summary><font color="#ff0000">hiroマーカーはこちら（クリックで開きます）</font></summary><div>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/ae221d2e-aa81-d6a7-a9f5-a5fbe4e70b72.png" width=40%>

</div></details>

## 立体表示させる
立体表示させるモデルのhiroマーカーから表示させる場所、大きさ、角度、高さ等を指定することができます。
**position**=場所、**scale**=大きさ、**rotation**=角度、**height**=高さ

```html
      <!-- ボックスを表示します 　position=場所、scale=大きさ、rotation=角度、height=高さ -->
       <a-entity
          position="0 -2 0"
          scale="1.5 1.5 1.5"
          rotation="0 0 0"
          height="-1"
          gltf-model="https://arjs-cors-proxy.herokuapp.com/[https://firebasestorage.～アップロードしたモデルURLへ差し替え]">
```

# 最後に
今回はWeb上ARカメラでバイクと推しキャラのフィギュアを立体表示することに成功しました。
背景がパソコンだから微妙なんですが・・・バイクの燃料タンクにhiroマーカーマグネットを貼って表示させたりできそうです。
ただ、立体モデルの準備にミスって足が切れていてやりなおしたり、ペイント3Dの操作が難しく微調整等まだまだ習得できないなぁ。といった感じです。
また、推しキャラを立体で表示させるにあたり、2Dで浮かび上がってくるだけでよいのか、3Dにして向きとか変えることができるか、マーカー以外を感知したら反応を変えることができるか 等、勉強しながらバージョンアップしていく予定です。