#PowerApps 3Dで表示(View in 3D) #02 Source指定方法

[前回](https://qiita.com/yamad365/items/61a327bbd52c133e9233) に引き続き「3D で表示」（View In 3D）コントロールの話題です。前回の動作イメージで紹介したアプリの詳細に行く前に、基本的な仕様部分を抑えておきましょう。

# もくじ
[事前準備](https://qiita.com/yamad365/items/48d021bca0c99418ea80)：プレビュー環境構築方法など
[View in 3D ＃01](https://qiita.com/yamad365/items/61a327bbd52c133e9233) ：概要
[View in 3D ＃02](https://qiita.com/yamad365/items/b4ca0d8a7877de183efe) ：Source指定方法　***※当記事***
[View In 3D ＃03](https://qiita.com/yamad365/items/2621b4f122b0bfa286a4) ：ODfB+Excelで表示

# 「3D で表示」するために必要な前提
「3D で表示」（View In 3D)コントロールの[Source]プロパティに表示したい情報を指定することで Power Apps 上で3D表示を実現するのですが・・・。現状でこのコントロールで指定すべきプロパティなのですが、とてもクセが強いです。

まず、公式情報 Docs の [View in 3D Properties](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-3d#properties) を確認ください。コントロールの[Source]プロパティに3Dデータを表示する手段の説明が記載されています。

> Data source that identifies the .glb file to display. The View in 3D component supports loading models from:
> 
> ・Publicly accessible, CORS-compliant URLs
> ・Base64-encoded URIs
> ・Attachments or media content accessed through data connectors

上記によると、表示する手段が3つあると記載されています。

 - CORS URL で指定する
 - Base64 エンコードされたモデルを指定する
 - データコネクター経由でファイルを指定する

で？
何が、どうクセが強いの？

要は「単純に SharePoint Online のドキュメントライブラリーや、OneDrive に保存した3DファイルのURLを[Source]プロパティに指定したダケでは表示されません」となっているのです。

# View in 3D する
[Source]プロパティにいずれかの方法で指定すればよい、というのはわかりました。画像コントロールのように素直にURL指定ではNGらしい。では実際にどうしたらよいのか。

## COROS URL で指定する
[@kaorun55](https://twitter.com/kaorun55) さんが YouTube で公開されていますので、そちらをご参照ください。

https://youtu.be/LXTnBV-Mcs8

前回紹介した Docs の手順に従って GitHub から指定する方法と、Azure Blob ストレージから指定する方法を紹介されています。

CORS については [オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) を参照ください。正直、記事投稿時点で当方もよくわかってないです(;^ω^)

# Base64 エンコードされたモデルを指定する
[公式のDocs](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-3d#loading-base64-encoded-models) に Power Automate を利用して SharePoint Online のドキュメントライブラリー上で実現する方法が紹介されています。

手順どおりに実施可能かと思いますので、詳細はDocsを参照くださいませ。

## データコネクター経由でファイルを指定する
え？マジでコネクター利用しないとダメなの？って思いますよね。（当方は思いましたｗ）
コネクター利用しないとダメなんですよ・・・。

### 1．SharePoint Online リストを利用する場合
ドキュメントライブラリーではありません。List（カスタムリスト）を利用します。データソースとして利用するListを作成したら .glb ファイルを ***添付ファイル***として登録します。
![spolist00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/74fd6911-60d0-688c-c3d7-3bfa2656a77b.png)

上記で格納した List に対して Power Apps のキャンバスアプリからコネクターで接続してコントロールの[Source]プロパティに添付ファイルの[Value]を指定すればOKです。
![spolist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/eede54ad-725e-2e55-c170-d00c8e6cfa3d.png)
重要なのは「URLではない」というコトですね。「Value」を指定する必要があります。添付ファイルのValueが自動的に"appres://～"になっているので、コレを指定することで3D表示をしているというコトでしょう。

### 2．OneDrive を利用する場合
.glb ファイルを OneDrive（ないし、OneDrive for Business）へ格納し、Excel で格納した glb ファイルの情報を作成し、Power Apps からその Excel をコネクターで接続して指定する、という手法になります。
この手法は[Docs](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-3d#loading-models-as-attachments-or-media-content)でも紹介されていますが、当方が手順通り試してもダメだった箇所がありました。具体的には・・・。

チョッと記事が長くなってきたので、いったんここで切り上げて、この OneDrive と Excel を利用した方法については次回にしたいと思います。

# まとめ
- 3Dファイルは「3D で表示」（View In 3D）コントロールの[Source]プロパティに指定する
- 指定方法は大きく3種類
  - CORS URL で指定する
  - Base64 エンコードされたモデルを指定する
  - データコネクター経由で指定する
    - SharePoint Online の List を利用して添付ファイル経由
    - OneDrive に .glb ファイルを格納して、Excel 経由

正直、クセが強い～です。イメージコントロールのようにURLで指定したらヨロシク処理をしてくれれば楽なのになぁ、などと思いましたｗ プレビュー機能ですし、しょうがないね！

Power Apps上で3D表示が可能になっただけでも凄い進化だと考えておりますので、今後のVerUpに期待です！！

さて、OneDrive と Excel を利用した方法は次回紹介したいと思います。（きじかいてますので、暫し、しばし...）
それでは皆さま、素晴らしい Power Platform Life を！