簡単にARを体験するならAdobe Aeroがいいかもしれない

簡単にARを作って体験したいという場合、Adobe Aeroがノーコードで気軽に作れます。
また、豊富なアセットがデフォルトで用意されていて、素材を用意していなくても結構遊べます。

# 【スターターアセット】
・植物
・抽象シェイプ
・タイポグラフィ
・重なったイラスト
・インテリアデザイン
・アニメーションアセット
・サウンド効果

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/ea5ef0dd-4c4e-cb68-877d-b17b32778799.png" width=377>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/4634ad02-e905-14bd-7177-9b830a045c95.png" width=377>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/bdcb632f-1e94-57d9-e38b-539c38b61523.png" width=377>

**【読込可能なデータ】**
PSD .OBJ .JPG .FBXなど、3Dだけじゃなく2Dデータの読み込みも可能です。

https://helpx.adobe.com/jp/aero/using/supported-file-formats.html

前準備としてApp Store、Google PlayからAeroアプリをインストールしておきます。
https://play.google.com/store/apps/details?id=com.adobe.aero.android&hl=ja&gl=US

https://apps.apple.com/jp/app/adobe-aero/id1401748913

### 【流れ】
1）新しいファイルを作成
2）配置する位置を指定
3）オブジェクトを配置
　（今回はBlenderで制作したオリジナルの3Dオブジェクトを使って説明します）
4）アニメーションの設定
5）共有してスマホ、パッドなどで体験

### 1）新しいファイルを作成
デスクトップアプリやiPadの場合は左下の、スマホの場合（図1）は右下にある＋マーク（新規作成/Create new）をクリックしてファイルを新規作成します。
![aero_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/ad2028a3-06b5-a284-394e-35dc5625a60e.png)

### 2）配置する位置を指定
Aero が検出可能なサーフェスを確認する画面がでるので、任意の場所でマーカーをタップします。
![aero_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/549c94cf-dda9-45fe-681e-45b2f769f3ce.png)

### 3）オブジェクトを配置
3D空間にオブジェクトを配置するため、左下の＋マークをタップします。
![aero_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/8b721b1c-2648-5a7c-8311-9a68f9414fbb.png)

**オブジェクトファイルの選択**
ファイル選択画面が表示されるので「スターターセット」「クリエイティブクラウド」などから任意のファイルを選択します。
![aero_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/43140adf-46f5-a137-932d-8ce404e1b7c6.png)
今回はオリジナルのデータを使用するので、ファイルから任意のオブジェクトファイルを選択すると、画面上にオブジェクトが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/6282d121-8569-20a7-8402-ad7ef2557ab8.png" width=377>
ウィンドウから移動、拡大・縮小、または回転ツールを選択すると、3D ギズモ（矢印のついた三角錐）が表示されます。ギズモハンドルを掴むかパネルの数値を変更して移動、拡大縮小、回転で大きさや位置の調整をします。

**【移動の場合の画面】**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/badea9a5-803f-8a82-01ca-e47a8364f33d.png" width=377>
**回転の場合の画面**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/ecb806f8-c0a1-c691-2f99-d9a286a5fac8.png" width=377>
**拡大縮小の場合の画面**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/7249cd90-f870-d36c-7f89-e1b6287adf8d.png" width=377>

### 4）アニメーションの設定
表示させたオブジェクトにアニメーション（動作）を設定します。

①オブジェクトを選択し、ツールバーの「動作」をタップします。
②動作パネルから、トリガーを選択します。
　トリガーの種類は「開始」「タップ」「近接開始」「近接終了」の4種類から選択します。
|種類  |意味|
|--|--|
|開始  |シーンが開始されるとき、選択したアクションを適用します。|
|タップ|アクションを再生するオブジェクトをタップします。|
|近接へ進入|アクションを再生するオブジェクトの定義された進入距離を入力します。|
|近接を終了|アクションを再生するオブジェクトの定義された終了距離を入力します。|

③アクションリストから「アニメーションを再生」を選択します。
　アニメーション（アクション）の種類は以下の通りです。
|アクションの種類  |内容|
|--|--|
|アニメーションを再生 |読み込んだアセットに付属するアニメーションを適用します。埋め込みアニメーションを含んだオブジェクトを読み込んだ場合は、録画されたアニメーションを追加し、それらのいずれかを選択して再生できます。|
|画像を再生|読み込んだアニメーション画像アセットに付属するアニメーションを適用します。|
|オーディオを再生|アセットにオーディオを追加して再生します。|
|パスを移動|デバイスを使用して、オブジェクトの移動パスを指定します。パスが記録され、再生できるようになります。このモードは、アニメーションアクションブロックから開始できます。|
|スピン|オブジェクトを 360 度スピンさせます。|
|バウンス| オブジェクトを上下にバウンスさせます。 |
|目的|オブジェクトを回転して、別のオブジェクトまたはカメラに向けます。これは、看板がエクスペリエンスの閲覧者に向くようにするサイネージに役立ちます。 |
|表示|オブジェクトの非表示を解除します。|
|非表示|オブジェクトを非表示にします。|
|移動/回転/拡大・縮小|設定された量だけオブジェクトを移動/回転/拡大・縮小します。|
|移動先|指定された場所にオブジェクトを移動します。|
|回り込み|オブジェクトが、別のオブジェクトの周囲の円を周回できるようにします。|
|フォロー|オブジェクトが別のオブジェクトを追いかけるようにします。|
|待機|アクション間のディレイを設定します。|
|URL を開く|アプリ内から Web サイトにリダイレクトします。|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/53d5167d-c0d3-a962-2b3a-3cd2788af3fd.png" width=377>


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/06a4b717-918e-b51d-91d6-94e5fbd96939.png" width=377>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/9c5c17f6-a541-6891-285e-cb527ab9a735.png" width=377>

今回の設定ではトリガーに「タップ」、動作に「バウンス」を設定して、こんな感じのアニメーションになりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/1e128bf5-00f1-6793-97d2-056237832f79.gif" width=377>

### 5）共有してスマホ、パッドなどで体験
完成したら「リンクを共有」をクリックしてQRコードを発行すれば、視聴者がこのQRコードでAeroを起動して、ARを体験することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/6862accc-7dd6-4805-17d9-67928d3ee2e4.png" width=377>