【初心者向け】Unity 2017 + Vuforiaで３Dモデルを表示してみた ～3Dモデル表示編～

## やること

[前回の記事][Uni1]でVuforiaにTargetとなるマーカーを登録し、パッケージの出力までを行った。

[Uni1]:https://qiita.com/SeagullShingo/items/f5193bb283b96562fd54

今回は下記を行う

- 登録したマーカーをカメラで検出した際に3Dモデルを出現させる

カメラはPCに備え付けのWebCAMを使用する。

## 準備作業

今回はUnityのVR的なカメラではなく、現実世界にマーカーが出現したときにアクションを起こす（今回は３Dモデルを表示）のでAR Cameraを使用する。

Unityのプロジェクトを作成し、下記の作業を行う。

- Main Camera削除
- AR Camera追加

Unity 2017インストール時に「Vuforia Augmented Reality Support」のコンポーネントをインポートしていれば、下記のように
「GameObject」->「Vuforia」->「AR Camera」を選択できる
（コンポーネントの追加インストールがある場合はそれに従う）

![Uni1.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/c65cb6ef-0cdd-39b9-6803-a4457804d5a1.jpeg)

AR Camera追加後のHierarchy

![Uni2.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/035fdc32-0626-25e4-a566-83460f3422b4.jpeg)

AR Cameraを少しずらしておく。
（後で３Dモデルを中心に持っていくようにするため。）
また、Vuforiaの設定をしようと思ったがWarningが出ている。VuforiaをEnableにせよ。とのこと。

![Uni3.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/c3a974bc-4f7c-a30b-df37-ec7ce5dc0c44.jpeg)

Unityの左上の「File」->「Build Settings」より設定を行う

![Uni4.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/9e5089b9-f44b-7f92-fd58-4db6540a9ded.jpeg)

「XR Settings」の2つにチェックをつける

![Uni5.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/2fb9acbb-918f-5901-f3ec-d85378c4b5b4.jpeg)

これにチェックをつけることで、Vuforiaの設定が可能になる
（「Open Vuforia configuration」）

![Uni6.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/749e3285-8bd8-0783-23af-890fef2f402d.jpeg)

準備の最後としてVuforiaから出力したDatabaseのパッケージをUnityにインポートする。
「Assets」->「Import Package」->「Custom package」

![Uni7.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/994f56bb-a99b-f156-45e4-924759956d65.jpeg)

![Uni8.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/c3e1592c-b512-f046-97b2-edf9d1dc3aba.jpeg)

![Uni9.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/49b183f9-8402-d7e7-4325-e12730c00a6b.jpeg)

インポートされたことは一応下記から確認可能

![Uni10.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/64fb6c77-51e3-ff12-b797-c4fb470364c8.jpeg)




## Vuforia情報の設定


「Open Vuforia configuration」よりVuforiaの設定を行う

- ライセンスの登録
- インポートしたDBのActivate

後、「Webcam」が「Integrated Camera」になっていることを確認

![Uni11_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/eacd90e2-f6d5-e5b7-2bc7-dc72031070f1.jpeg)

![Uni11_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/d10861c6-b0f6-43d3-a436-66995832ef07.jpeg)



## ImageTarget設定

次は実際にUnity上に作成したマーカーを配置し、その子要素として3Dモデルを配置する。

・ImageTarget配置
「GameObject」->「Vuforia」->「Image」をクリック
DatabaseとImage Targetを今回登録したものに設定する

![Uni12.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/10109ec5-aca7-05c9-1335-d71357094a9b.jpeg)

こんな感じでUnity上にあわられる
![Uni13.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/c5c0ad21-5c02-dd91-46e0-e6ac7ee16309.jpeg)

少し角度を調整しておく

![Uni14.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/aeec004f-31ea-1894-4888-f45265cf834d.jpeg)
![Uni15.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/7a5f797d-bbbf-2881-b531-952fa268b66a.jpeg)



・3Dモデルの配置

3Dモデルは事前にUnity-ChanというFreeのモデルを「Asset Store」から落としておいた。
（Unity-chanのダウンロードはググれば直ぐに出来ると思うのでここでは割愛）

ImageTargetの入れ子としてunity-chanモデルを配置

![Uni16_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/5455a8ca-9a9b-f28d-be11-e4e1ff45e296.jpeg)

角度がよくないので調整し正面を向くように修正

![Uni17.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/4c02b4b7-8216-b038-3cb6-b5301f402eae.jpeg)
![Uni18.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/1ca03229-5fc4-2b56-56a7-45a0a40669db.jpeg)


一応これでAR Cameraに対してunity-chanが正面を向いているのでOKとする
（各自好きなように調整してください。もちろん正面向いていなくても問題ない）


## WebCAMで確認

最後にWebCAMを起動させマーカーを検出して３Dモデルが表示されるかを確認する。

- マーカーである画像を印刷する。


Unityを実行しマーカーをかざすと3Dモデルが表示される。
下の画面です。（あまりうまく取れておらずごめんなさい・・・）



![Uni19.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/763b9c88-dc12-41f1-a878-f700e8acd10b.jpeg)


これで、Vuforiaに登録したマーカーを認識して３DモデルをAR空間に表示することが出来た。
次回はマーカー表示と同時に動画を開始させるということにチャレンジしたいと思う。