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.

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.

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

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

   

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.

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

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

• Créer une application avec les contrôles 3D et Mixed reality
• Utiliser la détection de marqueurs avec des contrôles de réalité mixte

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