Partager via


Afficher du contenu 3D ou des images dans la réalité mixte

Utilisez le contrôle Afficher en RM pour placer un modèle 3D d’un objet ou d’une image dans un espace du monde réel. Par exemple, prévisualisez une peinture sur un mur avant de l’accrocher, ou voyez si une bibliothèque virtuelle 3D s’adaptera à l’endroit où vous souhaitez qu’elle aille.

Que faire si vous n’avez pas de modèle 3D de l’objet ? Chargez une image de l’objet et définissez ses dimensions sur la taille de l’objet. Le contrôle applique l’image comme face d’un cube virtuel de la taille souhaitée. Placez ce remplaçant du modèle 3D dans votre espace.

Le contrôle Afficher en RM ajoute un bouton à votre application. Lorsqu’un utilisateur clique sur le bouton, il’application superpose un modèle 3D sélectionné (au format de fichier .glb, .stl ou .obj) ou une image (au format de fichier .jpg ou .png) sur le flux de caméra de l’appareil.

Une photo d’un écran de tablette qui montre un modèle 3D d’un chariot élévateur superposé sur une vue intérieure d’un entrepôt.

Vous pouvez également prendre des photos à l’aide du contrôle Afficher en RM et les charger sur OneDrive.

Important

Votre contenu 3D doit être au format de fichier .glb, .stl ou .obj. Vous pouvez convertir vos modèles 3D existants au format de fichier .glb à partir d’une variété de formats 3D. Le contenu 3D compressé avec la compression Draco n’est pas pris en charge.

Conseil

  • Assurez-vous que vos modèles 3D sont optimisés pour une utilisation avec Power Apps pour minimiser les temps de chargement.

  • Les contrôles Mixed-reality (MR) fonctionnent mieux dans des environnements bien éclairés avec des surfaces à texture plane. Le suivi est meilleur sur les appareils compatibles LIDAR.

  • Les contrôles MR dans Power Apps utilisent Babylon et Babylon React Native. Le contenu de réalité mixte qui fonctionne dans le bac à sable Babylon doit fonctionner dans Power Apps via cette plateforme MR partagée. Si votre contenu fonctionne dans Babylon mais pas dans Power Apps, posez une question dans le Forum de la communauté Power Apps. (Donnez-lui le nom de « réalité mixte ».)

Ajouter un bouton Afficher en RM à un écran d’application

Ouvrez votre application en mode édition dans Power Apps Studio :

  1. Ouvrez l’onglet Insérer et développez Réalité mixte.

  2. Sélectionnez Afficher en RM pour placer le contrôle dans l’écran de l’application ou faites-le glisser pour le positionner avec plus de précision.

Le contrôle est un bouton étiqueté avec une icône représentant un cube et le texte Afficher en RM. Modifiez l’étiquette et masquez l’icône si vous le souhaitez dans les propriétés Text et Type d’affichage.

Une capture d’écran de l’onglet Insertion dans Power Apps Studio, indiquant où trouver le contrôle Afficher en RM.

Affichage de plusieurs modèles en une seule session

Le contrôle Afficher dans MR affiche un fichier multimédia par défaut. Pour afficher différents fichiers multimédias sélectionnés via une galerie multimédia au cours de l’expérience MR, utilisez la propriété avancée Items du contrôle. Cette propriété crée un tableau qui répertorie les fichiers multimédias parmi lesquels l’utilisateur peut choisir dans l’expérience de réalité mixte.

Lors de l’utilisation de la propriété Items, vous devez également définir une valeur pour les propriétés supplémentaires suivantes pour mapper les colonnes de votre table d’entrée :

Propriété Description
ItemsSource (obligatoire) Spécifie quelle colonne dans Items identifie le modèle 3D ou l’image à afficher dans la vue de réalité mixte. Voir Connecter des modèles 3D à Power Apps pour en savoir plus sur l’intégration de modèles dans Power Apps.
ItemsLabel Spécifie quelle colonne dans Items contient l’étiquette à afficher dans la galerie multimédia. La propriété Alternative Text sera utilisée pour les éléments qui n’ont pas de valeur.
ItemsThumbnail Spécifie quelle colonne dans Items identifie la miniature à afficher dans la galerie multimédia. Une miniature par défaut est fournie pour les éléments qui n’en ont pas de spécifié.
ItemsObjectWidth, ItemsObjectHeight, ItemsObjectDepth Spécifie une taille explicite pour chaque élément multimédia dans le tableau. Les valeurs Object width, Object height et Object depth seront utilisées par défaut pour les éléments qui n’ont pas de taille spécifique.

Pour le tester, créons une galerie multimédia qui montre trois usines différentes dans une pièce. Notre table Items ressemble à ceci :

Étiquette source miniature
Oiseaux de paradis https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.png
Feuille de violon Figue https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.png
Petit Palmier https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.png

Vidéo montrant à quoi ressemble la galerie média dans l’expérience de réalité mixte.

Ouvrez votre application en mode édition dans Power Apps Studio :

  1. Ouvrez l’onglet Insérer et développez Réalité mixte.

  2. Sélectionnez Afficher en RM pour placer le contrôle dans l’écran de l’application ou faites-le glisser pour le positionner avec plus de précision.

  3. Sur l’onglet de propriété Avancé, sélectionnez la propriété Items et saisissez ou collez le code suivant :

    Table(
    {
    label: "Birds of Paradise",
    source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.glb",
    thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.png"
    },
    {
    label: "Fiddle Leaf Fig",
    source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.glb",
    thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.png"
    },
    {
    label: "Small Palm Tree",
    source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.glb",
    thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.png"
    }
    )
    
  4. Définissez la propriété ItemsLabel sur "label".

  5. Définissez la propriété ItemsSource sur "source".

  6. Définissez la propriété ItemsThumbnail sur "thumbnail".

    Capture d’écran des propriétés du contrôle Afficher en RM.

Notes

La propriété Items est définie sur votre source de données qui peut être une collection, à partir d’un connecteur ou une table codée en dur comme dans cet exemple. Les propriétés ItemsSource, ItemsLabel et ItemsThumbnail sont définies sur les noms de colonne de cette source de données entre guillemets.

  1. Enregistrez et publiez l’application, puis ouvrez-la sur votre appareil mobile pour l’essayer.

Comment les objets sont mis à l’échelle si vous les redimensionnez

Si vous ne spécifiez pas les dimensions lorsque vous placez un modèle, le contrôle Afficher en RM suit les dimensions données dans le fichier objet. Vous pouvez redimensionner le modèle en saisissant une valeur autre que 0 dans une ou plusieurs des propriétés width, height, et depth du contrôle (Object width, Object height, et Object depth). La mise à l’échelle du modèle dépend du nombre de dimensions que vous modifiez.

  • Si toutes les dimensions sont 0 (par défaut), la taille du modèle est conservée telle qu’elle est définie dans le fichier objet.

  • Si une dimension est définie, le modèle est mis à l’échelle de manière égale en fonction de la dimension modifiée, de la même manière que pour définir « conserver les proportions » lorsque vous redimensionnez une image.

  • Si deux dimensions sont définies, le modèle s’adapte aux deux dimensions données et à une moyenne des deux premières.
    Par exemple, supposons que vous ayez un modèle de 12 m de haut, 6 m de large et 3 m de profondeur. Vous définissez le propriétés du contrôle Afficher en RM comme suit : Object height: 24, Object width: 9, Object depth: 0 (inchangé). La hauteur augmente d’un facteur 2 et la largeur d’un facteur 1,5. L’augmentation de la hauteur et de la largeur est moyennée pour trouver le facteur par lequel la profondeur devrait être augmentée : 2 + 1,5 = 3,5 / 2 = 1,75. Les dimensions finales du modèle sont Hauteur de l’objet 24, Largeur de l’objet 9, et Profondeur de l’objet 5,25 (3 × 1,75).

  • Si les trois dimensions sont définies, la taille du modèle est remplacée par celle que vous avez spécifiée.

Notes

Si les mesures ne respectent pas le rapport d’aspect d’origine, le modèle peut être écrasé ou déformé lorsqu’il est visualisé en MR.

Propriétés

Changer le comportement et l’apparence du bouton Afficher en RM à l’aide des propriétés. Certaines propriétés ne sont disponibles que sur l’onglet Avancé.

Une capture d’écran d’un bouton Afficher en RM en construction dans Microsoft Power Apps Studio, affiché avec sa propriété.

Propriété Description Type Emplacement
Texte Definit le texte de l’étiquette du bouton. Chaîne Propriétés ; Avancé : Text
Alternative text Spécifie le texte à afficher si le modèle ne peut pas se charger, ou si l’utilisateur survole le modèle. Chaîne Propriétés ; Avancé : AltText
Type d’affichage Détermine si l’étiquette du bouton affiche une icône de cube, du texte ou les deux. Drop-down selection Propriétés ; Avancé : DisplayType
Source Identifie la source de données (fichier .glb, .stl ou .obj) à afficher. Non applicable Propriétés ; Avancé : Source
Sources List (Items) Source de données (table) qui répertorie plusieurs fichiers médias à afficher dans une seule session de réalité mixte. Tableau Propriétés ; Avancé : Items
Object width Définit la largeur du modèle. Entier Propriétés ; Avancé : ObjectWidth
Object height Définit la hauteur du modèle. Entier Propriétés ; Avancé : ObjectHeight
Profondeur de l’objet Définit la profondeur du modèle. Entier Propriétés ; Avancé : ObjectDepth
Unité de mesure Définit l’unité de mesure utilisée pour la largeur, la hauteur et la profondeur du modèle. Lister Propriétés ; Avancé : Units
Activer les ombres Détermine si les ombres sont utilisées pour améliorer l’effet 3D lorsque le modèle est affiché. Entier Propriétés ; Avancé : EnableShadows
Activer la détection de marqueur Détermine si la détection de marqueur sera utilisée pour déterminer la position et la rotation du modèle. Voir Utiliser la détection de marqueurs avec des contrôles de réalité mixte Booléen Propriétés ; Avancé : EnableMarkerDetection
Visible Affiche ou masque le bouton. Booléen Propriétés ; Avancé : Visible
Position Place le coin supérieur gauche du bouton en fonction des coordonnées d’écran spécifiées dans x et y. Nombre à virgule flottante Propriétés ; Avancé : X, Y
Size Détermine la taille du bouton à l’aide des valeurs de pixel fournies dans Width et Height. Entier Propriétés ; Avancé : Width, Height
Padding top Définit la distance entre le texte de l’étiquette du bouton et le haut du bouton. Nombre à virgule flottante Propriétés ; Avancé : PaddingTop
Padding bottom Définit la distance entre le texte de l’étiquette du bouton et le bas du bouton. Nombre à virgule flottante Propriétés ; Avancé : PaddingBottom
Padding left Définit la distance entre le texte de l’étiquette du bouton et le bord gauche du bouton. Nombre à virgule flottante Propriétés ; Avancé : PaddingLeft
Padding right Définit la distance entre le texte de l’étiquette du bouton et le bord droit du bouton. Nombre à virgule flottante Propriétés ; Avancé : PaddingRight
Font Définit le nom de la famille de polices utilisées pour le texte de l’étiquette du bouton. Lister Propriétés ; Avancé : Font
Taille de police Définit la taille de la police du texte de l’étiquette du bouton. Nombre à virgule flottante Propriétés ; Avancé : FontSize
Font weight Définit l’épaisseur du texte de l’étiquette du bouton : Bold, Lighter, Normal, ou Semibold. Lister Propriétés ; Avancé : FontWeight
Alignement de texte Définit l’alignement horizontal du texte de l’étiquette dans le bouton : Center, Justify, Left, ou Right. Non applicable Propriétés ; Avancé : TextAlignment
Vertical alignment Définit l’alignement vertical du texte de l’étiquette dans le bouton : Bottom, Middle, ou Top. Lister Propriétés ; Avancé : VerticalAlign
Font style Définit le style du texte de l’étiquette du bouton : Italic, Underline, Barré, ou aucun. Non applicable Propriétés ; Avancé : Italic, Underline, Barré
Border radius Détermine le rayon d’angle de la bordure du bouton. Nombre à virgule flottante Propriétés ; Avancé : BorderRadius
Color Définit les couleurs du texte de l’étiquette du bouton et l’arrière-plan du bouton. Non applicable Propriétés ; Avancé : FillColor, TextColor
Border Détermine le style, la largeur et la couleur de la bordure du bouton. Non applicable Propriétés ; Avancé : BorderStyle, BorderThickness, BorderFillColor
Disabled Désactive le bouton mais le laisse visible. Booléen Propriétés ; Avancé : Disabled
Disabled color Définit les couleurs du texte de l’étiquette du bouton, de l’arrière-plan du bouton et de la bordure du bouton si DisplayMode est Disabled. Non applicable Propriétés ; Avancé : DisabledContentColor, DisabledFillColor, DisabledBorderColor
Pressed color Définit les couleurs du texte de l’étiquette du bouton, de l’arrière-plan du bouton et de la bordure du bouton lorsque l’utilisateur sélectionne le bouton. Non applicable Propriétés ; Avancé : PressedContentColor, PressedFillColor, PressedBorderColor
Hover color Définit les couleurs du texte de l’étiquette du bouton, de l’arrière-plan du bouton et de la bordure du bouton lorsque l’utilisateur le survole avec le curseur de la souris. Non applicable Propriétés ; Avancé : HoverContentColor, HoverFillColor, HoverBorderColor
OnMixedRealitySelect Comportement déclenché lorsque l’utilisateur sélectionne le bouton pour se lancer dans l’expérience de réalité mixte. Action définie Avancé
OnChange Comportement déclenché lorsqu’une propriété du bouton est modifiée. Action définie Avancé
Info-bulle Détermine le texte à afficher lorsque l’utilisateur survole le bouton. Chaîne Avancé
ContentLanguage Détermine la langue d’affichage de l’étiquette du bouton, si elle est différente de la langue utilisée dans l’application. Chaîne Avancé
DisplayMode Détermine si le bouton autorise la saisie par l’utilisateur (Edit), affiche uniquement les données (View) ou est désactivé (Disabled). Enum Avancé
TabIndex Spécifie l’ordre dans lequel le bouton est sélectionné si l’utilisateur navigue dans l’application à l’aide de la touche Tab. Entier Propriétés ; Avancé : TabIndex

Propriétés de sortie

Votre application peut utiliser davantage de propriétés lorsqu’un utilisateur interagit avec le contrôle Afficher en RM. Celles-ci sont appelées propriétés de sortie. Vous pouvez utiliser ces output properties dans d’autres contrôles ou pour personnaliser l’expérience de l’application.

Propriété Description Type
Photos Collecte les photos capturées pendant la séance de réalité mixte. Vous pouvez charger les photos de réalité mixte sur OneDrive et les montrer dans une galerie. Non applicable

Autres contrôles Mixed reality

  • Afficher le contenu 3D avec le contrôle Objet 3D.
  • Mesurez la distance, la surface et le volume avec le contrôle Measure in mixed reality.
  • Créez et visualisez des formes 3D prédéfinies avec le contrôle View shape in mixed reality
  • Peignez des lignes 3D ou dessinez des flèches 3D pour indiquer une zone ou un actif dans votre environnement avec le contrôle Markup in MR.

Voir aussi

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).