8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Copilot 3Dを利用して商品カタログアプリを作ってみた

Last updated at Posted at 2025-12-22

この記事はMicrosoft Power Apps Advent Calendar 2025の23日目の記事になります。

はじめに

Copilot LabsのCopilot 3Dを使用して商品画像を3Dモデルに変換を行い、3DモデルをPower Appsにて表示し商品カタログアプリを作成した記事になります。

Copilot 3Dとは

Copilot Labsにて一枚の写真で3Dモデルに変換するサービスです。

一枚の写真から3Dモデルに変換を行ってくれます。

image.png

Copilot 3Dに画像をアップロードと保存

七五三のシーズンだったので、「被布コート」の写真をアップロードして3Dモデルを作成します。

Copilot 3Dにて写真をアップロードして作成ボタンを押すと3Dモデルが作成されます。
後はPower Appsのキャンバスアプリに3Dモデルを表示に対応しているファイル形式である「GLB」を選択しダウンロードします。

image.png

image.png

Microsoft Listsにマスタ登録

Microsoft Listsをデータソースとし、写真は画像、作成した3Dモデルを添付ファイルに保存し品番・品名等も登録しときます。

image.png

完成イメージ

商品画像・品番・商品名をギャラリーにて表示、ギャラリーを選択すると3Dモデルが表示され、撮影した写真表示と保存機能を持たせたタブレットのアプリ作成を目指します。

image.png

3D画像表示

ギャラリーにて選択している商品画像の3Dモデルを表示します。
3Dオブジェクトのコントロールを選択し、Sourceプロパティに選択しているギャラリーの添付ファイルを指定します。

//3DオブジェクトのSourceプロパティ
First(
    Gal_Shohin.Selected.添付ファイル).Value

image.png

MRで表示とカメラ表示

タブレットのカメラにて3Dモデルが表示され撮影出来るように、「MRで表示」コントロールを配置しSourceプロパティにて現在選択しているギャラリーの添付ファイルを設定します。

//「MRで表示」のSourceプロパティ
First(
    Gal_Shohin.Selected.添付ファイル).Value

3Dモデルの動作確認

実際にタブレットで操作してみて、目の前に3Dモデルが表示されるか確認します。
3Dモデルの回転や拡大・縮小や上下移動も可能で任意位置に表示出来るので、様々な用途で使えそうです。

image.png

撮影した写真と画像の保存

MR表示にて撮影した画像一覧を表示します。
ギャラリーにて「MRで表示」コントロールのPhotosを入力します。

///ギャラリーのitems
Vw_MR.Photos

撮影した画像を表示するため、ギャラリーに画像コントロールを追加しImageプロパティの設定を行います。

//画像コントロールのImageプロパティに設定
ThisItem.ImageURI

撮影した写真をコメントをつけて保存できる機能も追加

PACH関数を使って撮影した画像をコメントつきで保存できるようにします。また後で検索しやすいように品番等も合わせて保存します。

image.png

撮影した写真一覧表示

保存した写真を一覧表示します。

image.png

まとめ

Copilot 3Dにて画像を3Dモデルに変換しPower Appsにて表示を試してみました。
このアプリは、現場は興味があったのですが社長の興味が湧かなかったのでリリースすることはなかったですが、商品を伝える手段の一つとしてよいのではないかと思いました。

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?