Übung: „In MR anzeigen“ und „In 3D anzeigen“

  • 15 Minuten

Easy-Sales ist eine vertriebsorientierte Mixed Reality-Anwendung, die entwickelt wurde, um das Einkaufserlebnis zu verbessern. Die Vertriebsmitarbeiter, die diese Anwendung verwenden, können die Umgebung des Kunden prüfen und messen, um zu bestimmen, welche Produkte im Raum machbar sind. Sie können Kunden auch dabei helfen, das Produkt durch Mixed Reality zu visualisieren.

Wir implementieren die Funktionen Ansicht in 3D und Ansicht in MR von Power Apps, um Produkte genau zu visualisieren.

Hinzufügen von 3D-Objekten zur SharePoint-Liste

Die für die Anwendung erforderlichen 3D-Modelle und Bilder werden in der SharePoint-Liste gespeichert. Beginnen wir mit dem Hinzufügen der erforderlichen Ressourcen zu dieser Liste.

  1. Wählen Sie in der erstellten SharePoint-Liste " Easy Sales" die Spalte "+Hinzufügen " und dann "Spalten ein-/ausblenden" aus.

    Screenshot zum Hinzufügen einer Spalte.

  2. Stellen Sie sicher, dass Anlagen ausgewählt ist, und klicken Sie dann oben auf Anwenden.

    Screenshot von Anwenden von Anlagen.

  3. Wählen Sie ein Element in der Liste aus, und wählen Sie dann "Anlagen hinzufügen" aus. Wählen Sie ihr 3D-Modell (GLB-Datei) oder Das Bild (.jpg Datei) im benutzerdefinierten Power Apps-Ordner aus. Befolgen Sie dasselbe Verfahren für alle Elemente in der Liste.

    Screenshot zum Hinzufügen von Anlagen

  4. Wählen Sie das Dropdown neben der Spalte Anhänge aus und wählen Sie dann Anhänge zuerst anzeigen. Wir wollen, dass dies zuerst für einen einfachen Zugang platziert werden soll.

    Screenshot von Auswählen von „Anlagen zuerst anzeigen“.

Erstellen Sie die Detailseite und fügen Sie die 3D-Anzeige-Komponente hinzu.

Die Detailseite enthält alle Details und Informationen zum ausgewählten Produkt. Es gibt Ihnen ein Verständnis für bestimmte Merkmale des Produkts. Sie müssen die Produktseite verbinden, die Sie im vorherigen Abschnitt entworfen haben, und die Detailseite, die in diesem Abschnitt erstellt wurde. Hier verwenden Sie auch die Ansicht in 3D-Komponente von Power Apps, um Ihrer Canvas-App 3D-Inhalte hinzuzufügen. Sie können 3D-Objekte drehen und vergrößern, um eine bessere Ansicht zu erhalten.

  1. Erstellen Sie zwei neue Seiten, und benennen Sie sie Product_details und Carpet_details um.

    Screenshot des Erstellens detaillierter Seiten.

  2. Wählen Sie das > Symbol im Katalogsteuerelement aus, das auf der Seite " Produkte " und auf der Seite " Teppiche " enthalten ist. Konfigurieren Sie dann die OnSelect-Eigenschaft , indem Sie die folgenden Zeilen auf der Registerkarte "Funktionen " hinzufügen.

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

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

    Screenshot der Navigation zu den nächsten Details.

  3. Beginnen wir mit dem Erstellen der Product_details Seite, indem wir einige Etiketten hinzufügen, z. B. "Preis", "Abmessungen", " Stärke", "Farbe" und "Material". Sie können den Text innerhalb der Beschriftung bearbeiten und den gewünschten Text in die Texteigenschaft dieser Bezeichnung einfügen. Benennen Sie die Bezeichnungen entsprechend um.

    Screenshot des Hinzufügens von Bezeichnungen

    Hinweis

    Sie können das Design, die Schriftart und die Farbpalette Ihrer Anwendung anpassen, um die Benutzererfahrung und das Erscheinungsbild zu verbessern.

  4. Fügen Sie ein anderes Etikett mit dem Namen "Produktname " ein, um den Produktnamen oben anzuzeigen, und richten Sie es in der Mitte aus . Konfigurieren Sie die Text-Eigenschaft der Bezeichnung, indem Sie die folgende Zeile hinzufügen:

    content.'{Name}'

    Screenshot des Hinzufügens der Titelbezeichnung.

  5. Wählen Sie die Dropdownliste "Medien " und dann "Bild" aus, um ein Bild in den Product_details Bildschirm einzufügen. Konfigurieren Sie die Image-Eigenschaft wie folgt:

    content.ImageLink

    Screenshot des Hinzufügens eines Bilds.

  6. Die Komponente In 3D anzeigen soll die Komponente Bild überlagern. Die Produkte, die nicht über 3D-Modelle verfügen, können über die Image-Komponente angezeigt werden. Um die Ansicht in 3D-Komponente hinzuzufügen, wählen Sie das Dropdownmenü "Medien " und dann " In 3D anzeigen" aus.

    Screenshot des Hinzufügens der Ansicht in 3D.

    Hinweis

    Eine Standardform ist in der Komponente enthalten. Sie können diese Form in eine andere ändern, indem Sie die Source-Eigenschaft ändern.

  7. Positionieren Sie die Komponente wie im Bild dargestellt über der Bildkomponente, und konfigurieren Sie die Source-Eigenschaft der Ansicht in 3D-Komponente wie folgt, um 3D-Modelle aus der SharePoint-Liste zu verbinden.

    First(Gallery_products.Selected.Attachments).Value

    Screenshot der Konfiguration der Ansicht in 3D.

  8. Wir ändern die Visible-Eigenschaft sowohl der Bild- als auch der 3D-Ansichtskomponenten, um die Produkte je nach Dateityp, der in der Spalte Anlagen gespeichert ist, einfach anzuzeigen. Konfigurieren Sie die Visible-Eigenschaft des Bilds und der Ansicht in 3D-Komponenten wie folgt:

    • Bild :

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

      Screenshot des Änderns der Bildsichtbarkeit.

    • Ansicht in 3D :

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

      Screenshot: Ändern der Sichtbarkeit der Ansicht in 3D.

  9. Fügen Sie leere Etiketten neben den Etiketten "Preis", " Abmessungen", " Stärke", "Farbe" und " Material " hinzu, wie in der Abbildung dargestellt, um die Produktinformationen unter diesen Überschriften anzuzeigen. Konfigurieren Sie die Text-Eigenschaft dieser Bezeichnungen wie folgt:

    • Preis :

      content.Price

      Screenshot: leere Bezeichnung für den Preis.

    • Abmessungen :

      content.Dimensions

      Screenshot: leere Bezeichnung für die Abmessungen.

    • Gewicht :

      content.Weight

      Screenshot: leere Bezeichnung für das Gewicht.

    • Farbe :

      content.Color

      Screenshot der leeren Bezeichnung für die Farbe.

    • Material :

      content.PrimaryMaterial

      Screenshot des leeren Etiketts für Material.

  10. Wir fügen ein Zurück-Symbol hinzu, um zum vorherigen Bildschirm zu navigieren. Um das Symbol "Zurück " hinzuzufügen, erweitern Sie das Dropdownmenü "Symbole ", und wählen Sie das Symbol "Zurück" aus. Positionieren Sie das Symbol "Zurück " richtig, und konfigurieren Sie die OnSelect-Eigenschaft , indem Sie Folgendes hinzufügen:

    Navigate('Products',ScreenTransition.Cover)

    Screenshot des Hinzufügens von Symbol

    Führen Sie dasselbe Verfahren für Carpet_details aus. Passen Sie die Navigationsfunktion entsprechend an.

    Tipp

    Um den Fortschritt zu speichern, wählen Sie oben die Registerkarte "Datei " und dann die Option " Speichern" aus . Sie können auch STRG+S verwenden, um den Fortschritt zu speichern.

    Hinweis

    Vermeiden Sie es, die 3D-Ansicht-Komponente auf der Carpet_details-Seite einzuschließen. Wir verwenden keine 3D-Modelle für die Kategorie "Teppich" .

Komponente „In MR anzeigen“

Die Ansicht in MR ist ein Mixed Reality-Feature von Power Apps, mit dem Benutzer 3D-Objekte oder Bilder in ihrer realen Umgebung platzieren können. Die für die Anwendung erforderlichen 3D-Modelle und Bilder werden in der SharePoint-Liste gespeichert. Beginnen wir mit dem Hinzufügen der erforderlichen Ressourcen in der SharePoint-Liste .

  1. Fügen Sie die Ansicht in MR-Komponente zum Product_details-Bildschirm hinzu. Öffnen Sie die Registerkarte Einfügen, erweitern Sie dann das Mixed Reality-Dropdown, und wählen Sie dann die Ansicht in der MR-Komponente aus.

    Screenshot des Hinzufügens der Schaltfläche

  2. Wählen Sie auf der Registerkarte "Eigenschaften " für die Komponente "Ansicht in MR " das Feld "Quelle " aus, und geben Sie ein, um auf die in Ihrer SharePoint-Liste gespeicherten 3D-Modelle zuzugreifen:

    First(Gallery_products.Selected.Attachments).Value

    Screenshot zum Hinzufügen der Quelle für die Ansicht in MR.

    Hinweis

    Wir bieten die Funktion "Ansicht in MR" für die Kategorie Teppiche nicht an. Stattdessen schätzen wir den Preis des Teppichs abhängig von der Fläche, die in der In MR messen-Sitzung berechnet wird.

Eine weitere einzigartige Eigenschaft, die von der Komponente In MR anzeigen bereitgestellt wird, ist die Objektskalierung. Sie können die Größen Ihrer 3D-Modelle extern bearbeiten, indem Sie die Eigenschaften "Objektbreite", " Objekthöhe" und "Objekttiefe " ändern.

  • Legen Sie die folgenden Eigenschaften im Eigenschaftenbereich fest, wie in der Abbildung dargestellt:

    • Objektbreite = 1,5
    • Objekthöhe = 1
    • Objekttiefe = 1
    • Maßeinheit = Meter

    Diese Werte werden gemäß den in dieser Anwendung enthaltenen 3D-Modellen festgelegt.

    Screenshot zum Skalieren des Objekts für die Ansicht in MR.

    Hinweis

    Sie können die werte, die an die Objektbreite, Objekthöhe und Objekttiefe übergeben werden, entsprechend Ihren Anforderungen anpassen. Die übergebenen Werte werden in den einheiten angegeben, die in Maßeinheit angegeben sind. Wählen Sie eine geeignete Messeinheit aus der Dropdownliste aus, und geben Sie später die Werte ein.

    Tipp

    Um den Fortschritt zu speichern, wählen Sie oben die Registerkarte "Datei " und dann die Option " Speichern" aus . Sie können auch STRG+S verwenden, um den Fortschritt zu speichern.

Durch die Implementierung der obigen Schritte wird eine Anwendung mit einer Detailseite mit detaillierten Produktinformationen erstellt. Die Anwendung wird auch die Komponente 'Ansicht in 3D' umfassen, sodass Sie 3D-Inhalte einfügen können. Sie können 3D-Modelle auch in Ihrer realen Umgebung über die View in MR-Komponente platzieren. Nachdem Sie nun erfahren haben, wie Sie diese Features implementieren, können Sie sie in Ihre zukünftigen Anwendungen integrieren.

Animation der Anwendungsdemo nach der Implementierung der Ansicht in 3d und Ansicht in MR.