キャンバス アプリで 3D モデルを読み込む

  • [アーティクル]

さまざまなソースからキャンバス アプリに 3D モデルを読み込みます。 添付ファイルまたはメディア コンテンツ、ダイレクト URL、または Base64 でエンコードされた URI (Uniform Resource Identifier) からモデルを取得できます。

読み込み時間を最小限に抑えるために、3D モデルが Power Apps での使用に最適化 されていることを確認してください。

共通コネクタから 3D モデルを読み込む

添付ファイルまたはメディア コンテンツからの 3D モデルの読み込みは、データ コネクタがどのようにサポートされているかによって異なります。 データ コネクタが Mixed Reality コントロールに対応しているかどうかを確認するには、キャンバス アプリにラベル コントロールを追加し、Text プロパティをデータ ソースに設定します。 ラベル テキストが appres:// で始まる場合、そのデータ コネクタは 3D オブジェクト コントロール で機能します。

ヒント

.glb ファイルの拡張子を .jpg に変更し、メディア タブからアプリに直接アップロードすることができます。

Microsoft Lists から 3D モデルを読み込む

まず、SharePoint でリストを作成し、アプリに含める 3D モデルごとにエントリを追加します。

  1. Microsoft Lists を使用してリストを作成します。
  2. + 列の追加 列見出しを選択してから、列の表示/非表示 を選択します。
  3. 添付ファイル を選択し、適用 を選択します。
  4. リストにエントリを追加します。 エントリ フォームで 添付ファイルの追加 を選択し、3D モデル ファイルを選択します。
  5. アプリに含めるモデルごとに繰り返します。

次に、アプリにギャラリーを追加して、そのソースをリストに設定し、3D オブジェクト コントロールを追加して、そのソースをギャラリーに設定します。

  1. Power Apps Studio に ギャラリーを追加します。
  2. ギャラリー データ ソースをリストに設定します。
  3. 3D オブジェクト コントロールを追加する
  4. 詳細 プロパティ タブで、Source を First(Gallery1.Selected.Attachments).Value に設定します。

Excel ブックから 3D モデルを読み込む

まず、モデル ファイルが含まれているのと同じフォルダーに、OneDrive で Excel ブックを作成します。 アプリに含めるモデルごとに行を含むテーブルを追加します。

  1. Excel ブックを作成し、モデル ファイルが含まれている OneDrive フォルダーに保存します。

    Excel ブック ModelGallery とそれに付随する 3D モデル ファイルを示す OneDrive のスクリーンショット。

  2. ブックで、3DModel [image] と Name という名前の列を持つテーブルを作成します。

  3. アプリ ギャラリーに表示するモデルごとに行を追加します。 Name 列にモデルのラベル、3DModel [image] 列にモデル ファイルへの相対ファイル パスを入力します。

    {3D モデルの名前とオブジェクト ファイルへのパスの列を含む Excel テーブルのスクリーンショット。}

  4. ブックを閉じます。

次に、アプリにギャラリーを追加して、そのソースを Excel ブックに設定し、3D オブジェクト コントロールを追加して、そのソースをギャラリーに設定します。

  1. Power Apps Studio に ギャラリーを追加します。
  2. OneDrive コネクタを使用して、ギャラリー データ ソースを Excel ブックに設定します。
  3. 3D オブジェクト コントロールを追加する
  4. 詳細 プロパティ タブで、Source を Gallery1.Selected.'3DModel' に設定します。

URL から 3D モデルを読み込む

3D オブジェクト コントロールの Source プロパティは、3D モデル ファイルの URL にすることができます。

3D モデル ファイルは、制限付きのオリジン間リソース共有 (CORS) 設定がないサーバー上にある必要があります。 ホストするサーバーは、powerapps.com からのオリジン間リクエストを許可する必要があります。 Dropbox または GitHub を使用してファイルをホストし、CORS 準拠の URL を取得できます。

Dropbox で 3D モデル ファイルをホストする

  1. 3D モデル ファイルを Dropbox にアップロードし、共有 を選択します。
  2. 公開ダウンロード リンクを生成します。 例: https://www.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb?dl=0。
  3. 次のように URL を変更します: www を dl に置き換え、末尾の ?dl=0 を削除します。

これで、3D コントロールのソースとして使用できるダイレクト アクセス URL (この例では、https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb) が作成されました。

GitHub で 3D モデル ファイルをホストする

  1. 3D モデル ファイルがパブリック リポジトリに保存されていることを確認してください。
  2. ファイルの URL を取得します。 例: https://github.com/microsoft/experimental-pcf-control-assets/blob/master/robot_arm.glb。
  3. 次のように URL を変更します: /blob/ を削除して、https://github.com を https://raw.githubusercontent.com に置き換えます。

これで、3D コントロールのソースとして使用できる CORS 準拠の URL (この例では、https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb) が作成されました。

Base64 でエンコードされた 3D モデルを読み込む

3D オブジェクト コントロールの Source プロパティは、data:base64,<Base64-encoded content> 形式の Base64 でエンコードされた 3D モデル データ URI にすることができます。

重要

Base64 でエンコードされたモデルを使用すると、アプリの読み込みに時間がかかる場合があります。

Microsoft Power Automate または Microsoft Dataverse を使用して、モデルの Base64 でエンコードされた URI を作成できます。

Microsoft Power Automate を使用して Base64 でエンコードされた 3D モデルを作成する

Power Automate では、dataUri(base64(file content)) 式を使用して、SharePoint ドキュメント ライブラリに保存された 3D モデル ファイルを Base64 に変換できます。

次の例では、3DModelBase64Library という名前のドキュメント ライブラリと 3DModelBase64 という名前のリストが同じ SharePoint サイトに存在します。 リストには、複数行のテキスト 型の列が含まれている必要があります。

  1. ドキュメント ライブラリで、SharePoint に新しいファイルが追加されたら、カスタム アクションを完了する テンプレートに基づいて フローを作成 します。

  2. Library Name を 3DModelBase64Library (この例ではドキュメント ライブラリの名前) に設定します。

  3. SharePoint からファイル コンテンツを取得する という手順を追加します。

  4. File Identifier を Identifier に設定します。

  5. SharePoint からアイテムを作成する という手順を追加します。

  6. List Name を 3DModelBase64 (この例ではリストの名前) および Title に File Name with extension に設定します。

  7. dataUri を次の式に設定します:

    concat('data:model/gltf-binary;base64,', Last(split(dataUri(base64(body('Get_file_content'))), ',')))

    SharePoint ドキュメン トライブラリの 3D モデル ファイルを Base64 に変換する手順を示す Power Automate ワークフローのスクリーンショット。

ファイルがドキュメント ライブラリに追加され、ファイルが Base64 でエンコードされた データ URI に変換されると、フローが実行されます。

Power Apps Studio で、SharePoint データ コネクタを使用して、3D オブジェクト コントロールをリストに接続します。 コントロールの Source プロパティを Base64 でエンコードされたデータ URI に設定します。

Microsoft Dataverse を使用して Base64 でエンコードされた 3D モデルを作成する

Microsoft Dataverse の Note (注釈) テーブル は、Document フィールドに添付されたファイルを Base64 に変換します。

キャンバス アプリで URL から 3D モデルを読み込む際の既知の制約事項

  • Power Apps のセキュリティ アーキテクチャは、HTTP ではなく HTTPS リンクを必要とします。
  • モデル ファイルをホストするサーバーは、認証を必要とせず、CORS に準拠している必要があります。

注意

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

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