3D と Mixed Reality のコントロールでアプリを作成する

[アーティクル]
05/13/2022

3D object および View in MR のコントロールを使用して、アイテムを 3D で表示したり、特定のアイテムを指定した空間に収める方法を確認したりできます。

この記事では、Power Apps で 3D と Mixed Reality のコントロールを使用する方法を説明します。

View in MR コントロールでモバイルアプリを構築する方法については、このビデオをご覧ください:

前提条件

View in MR コントロールでアプリを作成する

View in MR コントロールは、アプリのボタンを作成します。アプリユーザーがボタンを選択すると、選択した 3D モデル (.glb ファイル形式)、または画像 (.jpg または .png ファイル形式) がデバイスのライブカメラフィードにオーバーレイされます。

ヒント

写真を撮ったり、それらを OneDrive にアップロードすることもできます。

このセクションではアプリに画面を作成し、ユーザーが View in MR コントロールを使用して、選択したアイテムを Mixed Reality で表示できるようにします。

Power Apps Studio でアプリを開きます。

アプリの OnStart プロパティを選択して、以下をコピーして貼り付けます。

ClearCollect(
    col3dObjects,
    {
        ObjectName: "Forklift",
        ObjectURL: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/forklift.glb"
    },
    {
        ObjectName: "HVAC",
        ObjectURL: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/hvac.glb"
    },
    {
        ObjectName: "Machine",
        ObjectURL: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/machine.glb"
    },
    {
        ObjectName: "Pallet w/ Boxes",
        ObjectURL: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/pallet_with_boxes.glb"
    },
    {
        ObjectName: "Robot Arm",
        ObjectURL: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb"
    }
)

上記のサンプルコードの内容で式を更新したアプリの OnStart プロパティ。

この式は、Mixed Reality で表示する 3D オブジェクトの名前とリンクを含むコレクションを作成します。

挿入タブからドラッグアンドドロップして、画面に テキストラベル を追加します。
追加したテキストラベルを画面の左上隅に配置し、プロパティ タブで次のプロパティを変更します。

プロパティ値

テキスト "MR 表示"

フォントサイズ 24

フォントの太さ FontWeight.Semibold

テキストの位置合わせ Align.Center

幅 640
詳細設定タブで、テキストラベルの次のプロパティを変更します。

プロパティ値

色 RGBA(255, 255, 255, 1)

塗りつぶし RGBA(56, 96, 178, 1)

この変更により、画面のヘッダーが提供されます。
挿入タブの レイアウト セクションから 空白の垂直ギャラリー を挿入します。
既に追加してある "MR 表示" ヘッダーの下にギャラリーを配置して展開し、画面の残りの部分を使用します。
ギャラリーの次のプロパティを変更します。

プロパティ値

データソース col3dObjects

テンプレートサイズ 80

X 0

Y 92

幅 640

高さ 1044
ギャラリーを編集する を選択して、ギャラリーを編集します。
ギャラリーに テキストラベル を挿入します。
追加したテキストラベルで次のプロパティを変更します。

プロパティ値

テキスト ThisItem.ObjectName

X 10

Y 5

幅 540
もう一度ギャラリーを編集します。
挿入タブの Mixed Reality セクションから、View in MR コントロールをギャラリーにドラッグアンドドロップします。
View in MR コントロールで次のプロパティを変更します。

プロパティ	値
色	`RGBA(255, 255, 255, 1)`
塗りつぶし	`RGBA(56, 96, 178, 1)`

プロパティ	値
データソース	`col3dObjects`
テンプレートサイズ	80
X	0
Y	92
幅	640
高さ	1044

プロパティ	値
テキスト	`ThisItem.ObjectName`
X	10
Y	5
幅	540

プロパティ	値
テキスト	"MR 表示"
表示の種類	アイコン
ソース	`ThisItem.ObjectURL`
X	`Parent.TemplateWidth - Self.Width - 5`
Y	5
幅	70

この変更により、3D オブジェクトのリストとボタンを備えたギャラリーが提供され、これを押すことでこれらのオブジェクトをユーザーが Mixed Reality で表示できます。

Mixed Reality コントロールをテストする

すべてのコントロールが追加されたので、アプリを保存して公開します。 Mixed Reality に対応したデバイスでアプリを開き、表示するオブジェクトに対応するボタンを押します。これで View in MR エクスペリエンスが開きます。

MR 表示。

画面の指示に従って、カメラを測定対象の表面に向けながらデバイスをゆっくりと左右に動かして、デバイスをキャリブレーションします。キャリブレーションが完了すると、表面にドットの配列が表示され、さらに画面の中央付近に円が表示されます。この円は、3D オブジェクトを最初に配置できる場所を示しています。キューブを配置したら、タッチコントロールを使用して移動または回転できます。

オブジェクトを移動する場合は、キューブを押してから配置したい場所にスライドさせます。オブジェクトを回転させる場合は、1 本の指で画面を押してから、もう 1 本の指で右または左にスワイプします。

左上隅にある戻るボタンを使用してアプリ画面に戻り、別のオブジェクトを選択します。このプロセスを必要に応じて繰り返し、各オブジェクトを表示します。

3D object コントロールでアプリを作成する

3D object コントロールを使用すると Power Apps でアイテムを 3D 表示できます。アプリを読み込むと、このコントロールによってアプリが含む 3D モデル (.glb ファイル形式) や画像 (.jpg や .png ファイル形式) を表示します。 3D モデルを選択して、回転、ズームイン、ズームアウトを実行できます。

このセクションではアプリに画面を作成し、ユーザーが 3D object コントロールを使用して、選択したアイテムを 3D で表示できるようにします。

View in MR コントロールでアプリを作成するセクションの手順 1 と 2 に従い、アプリの 3D オブジェクトコレクションでアプリを作成します。
挿入タブからドラッグアンドドロップして、画面に テキストラベル を追加します。
追加したテキストラベルを画面の左上隅に配置し、プロパティ タブで次のプロパティを変更します。

プロパティ値

テキスト "3D オブジェクト"

フォントサイズ 24

フォントの太さ FontWeight.Semibold

テキストの位置合わせ Align.Center

幅 640
詳細設定タブで、テキストラベルの次のプロパティを変更します。

プロパティ値

色 RGBA(255, 255, 255, 1)

塗りつぶし RGBA(56, 96, 178, 1)

この変更により、画面のヘッダーが提供されます。
挿入タブの レイアウト セクションから 空白の垂直ギャラリー を挿入します。
既に追加してある "MR 表示" ヘッダーの下にギャラリーを配置して展開し、画面の残りの部分を使用します。
ギャラリーの次のプロパティを変更します。

プロパティ値

データソース col3dObjects

テンプレートサイズ 80

X 0

Y 92

幅 640

高さ 1044
ギャラリーを編集する を選択して、ギャラリーを編集します。
ギャラリーに テキストラベル を挿入します。
追加したテキストラベルで次のプロパティを変更します。

プロパティ値

テキスト ThisItem.ObjectName

幅 640
もう一度ギャラリーを編集します。
挿入タブの メディア セクションから、3D object コントロールをギャラリーにドラッグアンドドロップします。
View in MR コントロールで次のプロパティを変更します。

プロパティ	値
テキスト	"3D オブジェクト"
フォントサイズ	24
フォントの太さ	`FontWeight.Semibold`
テキストの位置合わせ	`Align.Center`
幅	640

プロパティ	値
色	`RGBA(255, 255, 255, 1)`
塗りつぶし	`RGBA(56, 96, 178, 1)`

プロパティ	値
データソース	`col3dObjects`
テンプレートサイズ	80
X	0
Y	92
幅	640
高さ	1044

プロパティ	値
テキスト	`ThisItem.ObjectName`
幅	640

プロパティ	値
ソース	`ThisItem.ObjectURL`
X	18
Y	138
幅	600
高さ	550

この変更により、3D 表示に対応した 3D オブジェクトのリストを含むギャラリーが提供されます。

3D コントロールをテストする

すべてのコントロールが追加されたので、アプリを保存して公開します。 Mixed Reality に対応したデバイスでアプリを開き、画面をタッチして 3D で表示されたオブジェクトのズームイン、ズームアウト、回転を実行します。

3D オブジェクト

ギャラリーは複数の 3D オブジェクトを含むため、画面を下にスワイプして他のオブジェクトを表示し、ズームや回転の機能で 3D オブジェクトを操作します。

参照

注意

ドキュメントの言語設定についてお聞かせください。簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。個人データは収集されません (プライバシーステートメント)。