View 3D content in Power Apps

Add 3D content to your canvas apps. Use the View in 3D control to rotate and zoom into the model with simple gestures.

You can display a single 3D model, or you can let the user select from a gallery by connecting to a Gallery control.

Photo showing a 3D object being viewed in a mobile device.

Important

Your 3D content must be in the .glb, .obj, or .stl file formats.
You can convert your existing 3D models into the .glb file format from a variety of 3D formats.

Tip

The MR controls in Power Apps leverage Babylon and Babylon React Native. As a result of this shared MR platform, 3D content that works in the Babylon sandbox should work in Power Apps. For troubleshooting and help, submit a ticket in the Admin Center for Mixed Reality, or post a question on the Power Apps community forum (be sure to tag it with "mixed reality".)

Use the control

Insert the control into your app as you normally would for any other control or control.

With an app open for editing in Power Apps Studio:

  1. Open the Insert tab.

  2. Expand Media.

  3. Select the control View in 3D to place it in the center of the app screen, or drag and drop it to position it anywhere on the screen.

    Insert the View in 3D control into the app.

See the Load models with the View in 3D control topic for details on how to connect existing and external models with URLs, as media attachments, or as encoded URIs.

You can modify the control with a number of properties.

Properties

The following properties are on the control's View in 3D pane on the Properties and Advanced tabs.

Properties on the control's View in 3D pane.

Some properties are only available in the Advanced tab on the View in 3D pane.

Property Description Type Location
Source Data source that identifies the .glb file to display. The View in 3D control supports loading models from:
  • Publicly accessible, CORS-compliant URLs
  • Base64-encoded URIs
  • Attachments or media content accessed through data connectors
See the Loading external 3D models topic for more details.
Not applicable Properties (also in Advanced)
Alternative text Text to be displayed if the model can't load, or if the app user hovers on the model. String Properties (also in Advanced as AltText)
Background fill Set the background color for the control. Color picker Properties (also in Advanced as BackgroundFill, where it accepts RGBA or HTML hexadecimal color codes)
Pins(Items) Add pins to specific coordinates on the 3D model. Data table Properties (also in Advanced and the formula bar as Items)
Show pins Show the pins defined in Pins(Items). Toggle Properties (also in Advanced as ShowPins)
Show reset button Enables or disables the reset button, which resets the camera view onto the model. Toggle Properties (also in Advanced as ShowReset)
OnModelLoad Behavior that is triggered when a model is loaded into the control. Defined action Advanced
OnChange Behavior that is triggered when any property of the control is changed. Defined action Advanced
OnSelect Behavior that is triggered when a pin is selected or the user focuses on the control Defined action Advanced

Additional properties

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Height – The distance between a control's top and bottom edges.

TabIndex – Keyboard navigation order.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (or the screen if there's no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (or the screen if there's no parent container).

Performance considerations

Having multiple instances of the View in 3D control on one screen can lead to poor performance, as each version of the control will try to load the 3D models at the same time.

Other mixed reality controls

See also

Create an app with 3D and mixed reality controls