View 3D content or images in the real word

You can use the View in MR control in your app to let users see how a particular item might fit within a specified space.

The control creates a button in your app. When app users click the button, it overlays a selected 3D model (in .glb, .stl or .obj file formats) or image (in .jpg or .png file formats) onto the live camera feed of the device.

Photo showing a 3D model of a forklift being overlaid onto the real world through a mobile device.

You can also take photos and upload them to OneDrive.

Important

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

Tip

If your model has a large file size, it could negatively affect your experience. Consider optimizing your models for use in mixed reality.

Tip

The MR controls work best in well-lit environments with flat-textured surfaces. When establishing tracking, point the device at the surface you would like to track and slowly pan the device from right to left in broad arm motions. If tracking fails, exit and enter the MR view to reset the tracking and try again.

LIDAR-enabled devices will also result in better tracking.

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.

Use the control

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

With an app open for editing in Power Apps Studio:

  1. Open the Insert tab.

  2. Expand Mixed reality.

  3. Select the control View in MR 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 MR control into the app.

You can modify the control with several properties.

Properties

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

Properties on the View in MR pane.

Some properties are only available under More options in the Advanced tab on the View in MR pane.

Property Description Type Location
Text Label for the button. String Properties (also in Advanced)
Alternative text Text to be displayed if the control can't load, or if the app user hovers on the control. String Properties (also in Advanced as AltText)
Display type Whether the button shows just an icon, text, or both. Drop-down selection Properties (also in Advanced)
Source Data source that identifies the .glb, .stl, or .obj file to display. The View in MR control supports loading models from:
  • Publicly accessible, CORS-compliant URLs.
  • Base64-encoded URIs.
  • Attachments or media content accessed through data connectors.

For more information, see how to define where the 3D content is stored.
Not applicable Properties (also in Advanced)
Object width Width of the displayed image or 3D content. See also How object scaling is handled. Integer Properties (also in Advanced)
Object height Height of the displayed image or 3D content. See also How object scaling is handled. Integer Properties (also in Advanced)
Object depth The three-dimensional depth of the 3D content. See also How object scaling is handled. Integer Properties (also in Advanced)
Units The unit used for the object width, height, and depth fields. Drop-down selection Properties (also in Advanced)
Photos The photos captured during the mixed reality session.
You can upload the mixed-reality photos to OneDrive and show them in a gallery.
Not applicable (output property only)
OnMixedRealitySelect Behavior that is triggered when exiting the MR experience with new results. Defined action Advanced
OnChange Behavior that is triggered when any property on the button is changed. Defined action Advanced

How object scaling is handled

When you insert a model with the View in MR control, it will follow the model's inherent dimensions. Alternatively, you can specify some or all of the dimensions - these dimensions are labeled as the Object width, Object height, and Object depth properties.

If you want to change the size of the model, we apply certain scaling techniques depending on how many dimensions you change:

  • If no dimensions are set, we assume the model is already at its intended scale and leave it as is.

  • If one dimension is set, and the others are left at the default 0, we scale the whole object equally based on the set dimension.
    This behavior is similar to using a setting such as "keep aspect ratio" when resizing an image.

  • If two dimensions are set, we force the model to match the given dimensions and average the scale for the third dimension.

    • For example, say you had a model with an Object height of 12, an Object width of 6, and an Object depth of 3.
      You set Object height to 24, and Object width to 9, but leave Object depth unchanged.
      The height has increased by a factor of 2, but the width has increased by a factor of 1.5 - we average these two measurements to come to 1.75 and then scale the depth by that amount.
      The final scaled model would have an Object height of 24, Object width of 9, and Object depth of 5.25.
  • If all three dimensions are set, we match the size of the model to what you specify.

Note

If the measurements don't adhere to the original aspect ratio, you could end up with a squashed or distorted model when you view it in MR.

Additional properties

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

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

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

FillColor – The background color of a control.

Font – The name of the family of fonts in which text appears.

FontStyle – The style of the text in the control: None, Strikethrough, Underline, or Italic.

FontSize – The font size of the text that appears on a control.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

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

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

TabIndex – Keyboard navigation order.

TextAlignment – The alignment of the text: Center, Left, Right, or Justify.

Tooltip – Explanatory text that appears when the user hovers over a control.

VerticalAlign – The location of text on a control in relation to the vertical center of that control: Middle, Top, or Bottom.

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).

Other mixed reality controls

See also

Create an app with 3D and mixed reality controls