Bubble ARプラグイン SwiftXR Viewer でARを作ってみましょう！(初心者向け)part.3¦BubbleでAR体験をしよう！

Part.2ではSwiftXRサイトで顔追跡(Face Tracking)の設定と王冠(3Dモデル)をアップロードしました。

今回は王冠(3Dモデル)を頭に付ける調整とBubbleの画面でAR体験ができる

ようにしましょう！完成画像↓

1.SwiftXRサイトで王冠を頭に付ける調整をしましょう！

前回はSwiftXRサイトで王冠(3Dモデル)をアップロードするまでを

しましたね！

今回は王冠を頭に付ける調整をしましょう！

※Part.2の続きです！今回からご覧の方はPart.2をご覧ください。

1-1.王冠を頭に付ける設定

”顔追跡(Face Tracking)”をクリックしましょう！

【画像_1】

顔追跡(Face Tracking)をクリックすると下が開きます。

顔上の3Dオブジェクトを調整する(Adjust 3D Object on Face)をクリック

【画像_2】

1-2.顔上の3Dオブジェクト(王冠)を調整します

顔上の3Dオブジェクトを調整する(Adjust 3D Object on Face)をクリックを

すると【画像_3】になります中央画像の黒い物が王冠です。

中央画像の右側にある上からサイズ・移動・回転で王冠を頭に付ける調整を

します。

【画像_3】

①最初に一番上のサイズで王冠を顔(白い顔)に合うくらいのサイズにします

【画像4】

②王冠の飾りが顔側になっていますので回転Yで外側にします

【画像5】

③顔(白い顔)の向きを変えるにはマウスを押さえながら動かします。

　顔正面に向けて位置Yで上下に動かしてイイ位置にしてください！

【画像5】

④顔(白い顔)を横にすると王冠との間が空いています。これを調整しましょう

【画像6】

⑤位置Zを－と＋で調整します。※ご自分が良いと思う位置にしてください

【画像7】

⑥最後に顔(白い顔)を正面に向けて真中の位置を確認して”保存”ボタンを

　クリック

【画像8】

1-3.プレビューで確認する

王冠の位置を確認するために右上の赤い矢印部分をクリック

【画像9】

右下の"View on Face"をクリックしたらカメラが起動します

王冠の位置を確認して完了です。

【画像9】

2.BubbleにSwiftXR公開URLを埋め込む

完成まであと少しです！

2-1.BubbleのSwiftXRの公開URL埋め込む箇所

Bubbleの画面の戻りSwiftXRの公開URLを埋め込む箇所は【画像10】の

SwiftXR Viewer Aをクリックして黒い部分の 

Appreance：Published Project Linkに埋め込みます。

※【画像10】にあるURLは消してください

【画像10】

2-2.SwiftXRの公開URLを取得

SwiftXRサイトのcrown画面に戻り【画像11】右上にある公開(Publish)を

クリック！

【画像11】

公開URLを作成することができます！

進む(Proceed)をクリックして公開URLができます。

【画像12】

URLをコピーしてBubbleに埋め込みましょう【画像10】

【画像13】

3.ARを体験しょう！

Bubbleに【画像13】のURLを埋め込みプレビューでAR体験ができます！

View on Faceをクリックするとカメラが起動して頭に王冠が現れます！

【画像14】

スマホを使うと完成画像↓がビデオで撮れます！

お疲れ様でした。

Nocode BubbleでAR体験ができたらアプリの機能としても使えます

色々と触ってみてください ！

Part.1からご覧いただきましてありがとうございました。

またBubbleでできる簡単で楽しくなるブログを公開します。

今後も楽しみにしてください！

※画像とTextで分からないところは遠慮なく質問をしてください