Bubble ARプラグイン SwiftXR ViewerでARを作ってみましょう！(初心者向け)part.2¦SwiftXRサイトで顔追跡

Part.1でSwiftXRとBubbleの準備を完了しました。

今回は顔追跡の設定と3Dモデル(王冠)をアップロードしましょう！

完成画像↓

1.Bubble画面作成

今回はAR画面作成だけのためページはindexでも大丈夫です！

1-1．画面作成

今回はMobileサイズにします

index画面をクリックして黒の画面を出します

Layoutクリック→Container layout:Colum(縦並び)

                         Preset page width:Mobile

                         Default builder width:380px

                         Min width:380px

                         Min height:600px　に設定してください

1-2.SwiftXR Viewerをindex画面に設定

左側のVisual ElementsのSwiftXR Viewerをドラッグ＆ドロップで配置

index画面中に持ってくる！index画面の周りが赤くなったら

画面の中に入っています。↓画像

SwiftXR Viewer Aの黒画面 Layoutをクリック！

Horizontal alliegnment の真ん中にします(赤の→)

Make this element fixed-width にチェック！

width:380px

Make this element fixed-height

Height:400px

これでBubbleのサイズ設定が完成しました。

2.SwiftXRサイトで顔追跡の設定と王冠(3Dモデル)をアップロード

2-1.プロジェクトの作成

ホームページの左側”プロジェクト作成”ボタンをクリック！

プロジェクト名は何でも良いです。今回は「crown」にします

”作成する”ボタンをクリック！

2-2．顔追跡(Face Tracking)設定

プロジェクト名を作成後に【画面_1】になります！

中央の白い部分(体)で作成します。

①上からレイヤー・コンポーネント・ファイル・プロジェクト設定

②プロパティとデザインの設定ができます

顔追跡(Face Tracking)は①のコンポーネント(上から2番目)をクリック

【画面_1】

コンポーネントをクリックをして顔追跡(Face Tracking)をドラッグ＆ドロップで体(Body)に配置をします。【画像_2】→【画像_3】

【画像_2】

【画像_3】

2-3.3Dモデルをアップロード

中央の体(Body)に3Dモデルをアップロードしましょう！

①3Dモデルをアップロードするをクリック

②3Dストアをクリックしてストアを開きます【画像_4】

【画像_4】

3Dストアをクリックするとストアが開き3Dモデルが多数現れます。

【画像_5】

crownを検索します！

※例として王冠にしましたが お好きなモデルを選んでください

【画像_5】

【画像_6】の王冠(完成画像で使用)をクリック→”はい、ダウンロードします(Yes,Download)"ボタンをクリックします。

※お好きなモデルを選んでください

【画像_6】

"はい、ダウンロードします”ボタンをクリックすると【画像_7】のように

ストアで選んだ王冠がアップロードされます。

【画像_7】

お疲れ様です。

顔追跡の設定と王冠をアップロードまでできました！

次回 Part.3では王冠を頭に付けるように調整をします。

お楽しみにしてください！

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