Exercice - Afficher dans MR et Afficher en 3D

  • 15 minutes

Easy-Sales est une application de réalité mixte orientée vente conçue pour améliorer l’expérience d’achat. Les vendeurs qui utilisent cette application peuvent inspecter et mesurer l’environnement du client pour déterminer quels produits sont réalisables dans l’espace. Ils peuvent également aider les clients à visualiser le produit par le biais de la réalité mixte.

Nous allons implémenter la vue en 3D et View dans les fonctionnalités MR de Power Apps pour visualiser les produits avec précision.

Ajouter des objets 3D à la liste SharePoint

Les modèles et images 3D requis pour l’application sont stockés dans la liste SharePoint . Commençons par ajouter les ressources requises à cette liste.

  1. Dans la liste SharePoint créée nommée Easy Sales, sélectionnez la colonne + Ajouter , puis sélectionnez Afficher/masquer les colonnes.

    Capture d’écran de l’ajout d’une colonne.

  2. Vérifiez que les pièces jointes sont sélectionnées, puis appuyez sur Appliquer en haut.

    Capture d’écran pour appliquer des pièces jointes

  3. Sélectionnez un élément dans la liste, puis sélectionnez Ajouter des pièces jointes. Sélectionnez votre modèle 3D (fichier.glb) ou Image (fichier.jpg) dans le dossier personnalisé Power Apps. Suivez la même procédure pour tous les éléments de la liste.

    Capture d’écran pour ajouter des pièces jointes

  4. Sélectionnez la liste déroulante en regard de la colonne Pièces jointes , puis sélectionnez Afficher les pièces jointes en premier. Nous voulons que cela soit placé en premier pour un accès facile.

    Capture d’écran pour sélectionner Afficher les pièces jointes en premier.

Créer la page de détails et ajouter l’affichage dans le composant 3D

La page de détails inclut tous les détails et informations concernant le produit sélectionné. Il vous donne une compréhension de certaines fonctionnalités du produit. Vous devez connecter la page de produit que vous avez conçue dans la section précédente et la page de détails créée dans cette section. Ici, vous utilisez également la vue dans le composant 3D de Power Apps pour ajouter du contenu 3D à votre application canevas. Vous serez en mesure de faire pivoter et de zoomer sur des objets 3D pour une meilleure vue.

  1. Créez deux nouvelles pages et renommez-les Product_details et Carpet_details.

    Capture d’écran de la création de pages détaillées.

  2. Sélectionnez l’icône > dans le contrôle galerie inclus dans la page Produits et la page Tapis . Ensuite, configurez la propriété OnSelect en ajoutant les lignes suivantes dans l’onglet Functions respectivement.

    Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})

    Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})

    Capture d’écran de la navigation vers les détails suivants.

  3. Commençons à créer la page Product_details en ajoutant quelques étiquettes, telles que Price, Dimensions, Weight, Color et Material. Vous pouvez modifier le texte à l’intérieur de l’étiquette, en insérant le texte souhaité dans la propriété Text de cette étiquette. Renommez les étiquettes en conséquence.

    Capture d’écran de l’ajout d’étiquettes

    Remarque

    Vous pouvez personnaliser le thème, la police et la palette de couleurs de votre application pour améliorer l’expérience utilisateur et l’apparence.

  4. Insérez une autre étiquette nommée Nom du produit pour afficher le nom du produit en haut et le Centre l’aligner . Configurez la propriété Text de l’étiquette en ajoutant la ligne suivante :

    content.'{Name}'

    Capture d’écran de l’ajout d’une étiquette de titre.

  5. Sélectionnez la liste déroulante Média , puis sélectionnez Image pour insérer une image dans l’écran Product_details . Configurez la propriété Image de la manière suivante :

    content.ImageLink

    Capture d’écran de l’ajout d’une image.

  6. Nous allons chevaucher la vue dans le composant 3D sur le composant Image . Les produits qui n’ont pas de modèles 3D attachés peuvent être consultés via le composant Image . Pour ajouter la vue dans le composant 3D , sélectionnez la liste déroulante Média , puis sélectionnez Affichage dans 3D.

    Capture d’écran de l’ajout d’une vue en 3D.

    Remarque

    Une forme par défaut est incluse dans le composant. Vous pouvez modifier cette forme en une autre en modifiant la propriété Source .

  7. Positionnez le composant sur le composant image, comme illustré dans l’image, puis configurez la propriété Source de la vue dans le composant 3D comme suit pour connecter des modèles 3D à partir de la liste SharePoint.

    First(Gallery_products.Selected.Attachments).Value

    Capture d’écran de la configuration de l’affichage en 3D.

  8. Nous allons modifier la propriété Visible des composants Image et Affichage dans les composants 3D pour afficher facilement les produits en fonction du type de fichier stocké dans la colonne Pièces jointes . Configurez la propriété Visible de l’image et de la vue dans les composants 3D comme suit :

    • Image :

      If(Gallery_products.Selected.FileType = "Image", true, false)

      Capture d’écran de la modification de la visibilité de l’image.

    • Affichage en 3D :

      If(Gallery_products.Selected.FileType = "Model", true, false)

      Capture d’écran de la modification de la vue dans la visibilité 3D.

  9. Ajoutez des étiquettes vides en regard des étiquettes Prix, Dimensions, Poids, Couleur et Matériau , comme indiqué dans l’image pour afficher les informations sur le produit sous ces titres. Configurez la propriété Text de ces étiquettes comme suit :

    • Prix :

      content.Price

      Capture d’écran de l’étiquette vide pour le prix.

    • Dimensions :

      content.Dimensions

      Capture d’écran de l’étiquette vide pour la dimension.

    • Poids :

      content.Weight

      Capture d’écran de l’étiquette vide pour le poids.

    • Couleur :

      content.Color

      Capture d’écran de l’étiquette vide pour la couleur.

    • Matériel :

      content.PrimaryMaterial

      Capture d’écran de l’étiquette vide pour le matériel.

  10. Nous allons ajouter une icône Précédent pour accéder à l’écran précédent. Pour ajouter l’icône Précédent , développez la liste déroulante Icônes et sélectionnez l’icône Précédent. Positionnez l’icône Précédent correctement et configurez la propriété OnSelect en ajoutant les éléments suivants :

    Navigate('Products',ScreenTransition.Cover)

    Capture d’écran de l’ajout d’une icône de retour et d’OnSelect

    Suivez la même procédure pour Carpet_details. Personnalisez la fonction Navigate en conséquence.

    Conseil / Astuce

    Pour enregistrer votre progression, sélectionnez l’onglet Fichier en haut et sélectionnez l’option Enregistrer . Vous pouvez également utiliser Ctrl+S pour enregistrer votre progression.

    Remarque

    Évitez d’inclure la vue dans le composant 3D sur la page Carpet_details . Nous n’utilisons pas de modèles 3D pour la catégorie Tapis .

Affichage dans le composant MR

La vue dans MR est une fonctionnalité de réalité mixte fournie par Power Apps qui permet aux utilisateurs de placer des objets 3D ou des images dans leur environnement réel. Les modèles et images 3D requis pour l’application sont stockés dans la liste SharePoint . Commençons par ajouter les ressources nécessaires dans la liste SharePoint .

  1. Ajoutez la vue dans le composant MR à l’écran Product_details . Ouvrez l’onglet Insertion , développez la liste déroulante Réalité mixte , puis sélectionnez l’affichage dans le composant MR.

    Capture d’écran de l’ajout d’affichage dans le bouton MR.

  2. Dans l’onglet Propriétés du composant Affichage dans MR , sélectionnez le champ Source et entrez pour accéder aux modèles 3D stockés dans votre liste SharePoint :

    First(Gallery_products.Selected.Attachments).Value

    Capture d’écran de l’ajout d’une source pour l’affichage dans MR.

    Remarque

    Nous n’incluons pas la fonctionnalité Affichage dans MR pour la catégorie Tapis . Au lieu de cela, nous allons estimer le prix du tapis en fonction de la zone calculée dans la mesure dans la session MR.

Une autre propriété unique que fournit le composant View dans MR est la mise à l’échelle de l’objet. Vous pouvez modifier les tailles de vos modèles 3D en externe en modifiant la largeur de l’objet, la hauteur de l’objet et les propriétés de profondeur de l’objet .

  • Définissez les propriétés suivantes dans le volet Propriétés , comme indiqué dans l’image :

    • Largeur de l’objet = 1,5
    • Hauteur de l’objet = 1
    • Profondeur de l’objet = 1
    • Unité de mesure = Compteurs

    Ces valeurs sont définies en fonction des modèles 3D inclus dans cette application.

    Capture d’écran pour mettre à l’échelle l’objet pour l’affichage dans MR.

    Remarque

    Vous pouvez également personnaliser les valeurs passées à la largeur de l’objet, à la hauteur de l’objet et à la profondeur de l’objet en fonction de vos besoins. Les valeurs passées sont prises dans les unités spécifiées dans l’unité de mesure. Choisissez une unité de mesure appropriée dans la liste déroulante et entrez ultérieurement les valeurs.

    Conseil / Astuce

    Pour enregistrer votre progression, sélectionnez l’onglet Fichier en haut et sélectionnez l’option Enregistrer . Vous pouvez également utiliser Ctrl+S pour enregistrer votre progression.

L’implémentation des étapes ci-dessus génère une application avec une page de détails contenant des informations détaillées sur le produit. L’application inclut également la vue dans le composant 3D , ce qui vous permet d’inclure du contenu 3D. Vous pouvez également placer des modèles 3D dans votre environnement réel via le composant View dans MR . Maintenant que vous avez appris à implémenter ces fonctionnalités, vous pouvez les incorporer dans vos applications futures.

Animation de la démonstration de l’application après l’implémentation de l’affichage en 3d et en mode MR.