Oefening - Bekijken in Mixed Reality en Bekijken in 3D

  • 15 minuten

Easy-Sales is een op de verkoop gerichte mixed reality-toepassing die is gebouwd om de winkelervaring te verbeteren. De verkopers die deze toepassing gebruiken, kunnen de omgeving van de klant inspecteren en meten om te bepalen welke producten haalbaar zijn in de ruimte. Ze kunnen klanten ook helpen het product te visualiseren via mixed reality.

We implementeren de weergave in 3D en View in MR-functies van Power Apps om producten nauwkeurig te visualiseren.

3D-objecten toevoegen aan de SharePoint-lijst

De 3D-modellen en afbeeldingen die vereist zijn voor de toepassing, worden opgeslagen in de SharePoint-lijst. Laten we beginnen met het toevoegen van de vereiste resources aan deze lijst.

  1. Selecteer in de gemaakte SharePoint-lijst met de naam Easy Sales de kolom + Toevoegen en selecteer vervolgens Kolommen weergeven/verbergen.

    Schermopname om een kolom toe te voegen.

  2. Zorg ervoor dat Bijlagen is geselecteerd en druk vervolgens bovenaan op Toepassen .

    Schermopname voor het toepassen van bijlagen

  3. Selecteer een item in de lijst en selecteer Vervolgens Bijlagen toevoegen. Selecteer uw 3D-model (.glb-bestand) of Afbeelding (.jpg bestand) in de aangepaste map van Power Apps. Volg dezelfde procedure voor alle items in de lijst.

    Schermopname voor het toevoegen van bijlagen

  4. Selecteer de vervolgkeuzelijst naast de kolom Bijlagen en selecteer vervolgens Eerst Bijlagen weergeven. We willen dat dat eerst voor eenvoudige toegang wordt geplaatst.

    Schermopname om eerst bijlagen weergeven te selecteren.

De pagina Details maken en de weergave toevoegen in het 3D-onderdeel

De detailpagina bevat alle details en informatie over het geselecteerde product. Het geeft u inzicht in bepaalde functies van het product. U moet de productpagina verbinden die u in de vorige sectie hebt ontworpen en de detailpagina die in deze sectie is gemaakt. Hier gebruikt u ook het onderdeel Weergave in 3D van Power Apps om 3D-inhoud toe te voegen aan uw canvas-app. U kunt 3D-objecten draaien en inzoomen voor een betere weergave.

  1. Maak twee nieuwe pagina's en wijzig de naam Product_details en Carpet_details.

    Schermopname van het maken van gedetailleerde pagina's.

  2. Selecteer het > pictogram in het galerie-besturingselement dat is opgenomen op de pagina Producten en Tapijten . Configureer vervolgens de eigenschap OnSelect door respectievelijk de volgende regels toe te voegen op het tabblad Functions .

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

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

    Schermopname van navigatie naar de volgende details.

  3. Laten we beginnen met het bouwen van de Product_details pagina door een paar labels toe te voegen, zoals Prijs, Afmetingen, Gewicht, Kleur en Materiaal. U kunt de tekst in het label bewerken en de gewenste tekst invoegen in de eigenschap Tekst van dat label. Wijzig de naam van de labels dienovereenkomstig.

    Schermopname van het toevoegen van labels

    Notitie

    U kunt het thema, lettertype en kleurenpalet van uw toepassing aanpassen om de gebruikerservaring en het uiterlijk te verbeteren.

  4. Voeg een ander label in met de naam Product om de productnaam bovenaan weer te geven en centreer het. Configureer de eigenschap Tekst van het label door de volgende regel toe te voegen:

    content.'{Name}'

    Schermopname van het toevoegen van een titellabel.

  5. Selecteer de vervolgkeuzelijst Media en kies vervolgens Afbeelding om een afbeelding in het scherm Product_details in te voegen. Configureer de eigenschap Image op de volgende manier:

    content.ImageLink

    Schermopname van het toevoegen van een afbeelding.

  6. We zullen de 3D-bekijk-component over de Afbeelding-component overlappen. De producten waaraan geen 3D-modellen zijn gekoppeld, kunnen worden bekeken via het onderdeel Afbeelding . Om de Bekijk in 3D-component toe te voegen, selecteer je de vervolgkeuzelijst Media en selecteer je Bekijk in 3D.

    Schermopname van het toevoegen van de weergave in 3D.

    Notitie

    Er wordt een standaardvorm opgenomen in het onderdeel. U kunt deze vorm wijzigen in een andere door de eigenschap Bron te wijzigen.

  7. Plaats het onderdeel op het afbeeldingsonderdeel, zoals wordt weergegeven in de afbeelding en configureer de eigenschap Bron van de weergave in het 3D-onderdeel als volgt om 3D-modellen te verbinden vanuit de SharePoint-lijst.

    First(Gallery_products.Selected.Attachments).Value

    Schermopname van het configureren van de weergave in 3D.

  8. We wijzigen de eigenschap Visible van zowel de afbeeldingals de weergave in 3D-onderdelen om de producten eenvoudig weer te geven, afhankelijk van het bestandstype dat is opgeslagen in de kolom Bijlagen . Configureer de eigenschap Visible van de afbeelding en weergave in 3D-onderdelen als volgt:

    • Afbeelding :

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

      Schermopname van het wijzigen van de zichtbaarheid van afbeeldingen.

    • Weergeven in 3D :

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

      Schermopname van het wijzigen van de weergave in 3D-zichtbaarheid.

  9. Voeg lege labels toe naast de labels Prijs, Afmetingen, Gewicht, Kleur en Materiaal , zoals weergegeven in de afbeelding om de productinformatie onder deze koppen weer te geven. Configureer de eigenschap Text van deze labels als volgt:

    • Prijs :

      content.Price

      Schermopname van een leeg etiket voor de prijs.

    • Afmetingen :

      content.Dimensions

      Schermopname van leeg label voor dimensie.

    • Gewicht :

      content.Weight

      Schermopname van leeg label voor gewicht.

    • Kleur :

      content.Color

      Schermopname van leeg label voor kleur.

    • Materiaal :

      content.PrimaryMaterial

      Schermopname van leeg label voor materiaal.

  10. We voegen een Vorige pictogram toe om naar het vorige scherm te navigeren. Als u het pictogram Vorige wilt toevoegen, vouwt u de vervolgkeuzelijst Pictogrammen uit en selecteert u het pictogram Vorige. Plaats het pictogram Vorige correct en configureer de eigenschap OnSelect door het volgende toe te voegen:

    Navigate('Products',ScreenTransition.Cover)

    Schermopname van het toevoegen van het terug-pictogram en OnSelect

    Volg dezelfde procedure voor Carpet_details. Pas de functie Navigate dienovereenkomstig aan.

    Tip / Fooi

    Als u de voortgang wilt opslaan, selecteert u het tabblad Bestand bovenaan en selecteert u de optie Opslaan . U kunt ook Ctrl+S gebruiken om uw voortgang op te slaan.

    Notitie

    Vermijd opnemen van de Bekijk in 3D component op de Carpet_details-pagina. We gebruiken geen 3D-modellen voor de categorie Tapijt .

Weergeven in MR-component

Weergave in MR is een mixed reality-functie van Power Apps waarmee gebruikers 3D-objecten of afbeeldingen in hun echte omgeving kunnen plaatsen. De 3D-modellen en afbeeldingen die vereist zijn voor de toepassing, worden opgeslagen in de SharePoint-lijst. Laten we beginnen met het toevoegen van de benodigde resources in de SharePoint-lijst .

  1. Voeg het onderdeel Weergave in MR toe aan het Product_details scherm. Open het tabblad Invoegen en vouw vervolgens de vervolgkeuzelijst Mixed Reality uit en selecteer vervolgens het onderdeel Weergave in MR .

    Schermopname van het toevoegen van de knop Weergave in MR.

  2. Selecteer op het tabblad Eigenschappen voor het onderdeel Weergave in MR het veld Bron en voer deze in om toegang te krijgen tot de 3D-modellen die zijn opgeslagen in uw SharePoint-lijst :

    First(Gallery_products.Selected.Attachments).Value

    Schermopname voor het toevoegen van bron voor weergave in MR.

    Notitie

    We nemen de functie View in MR niet op voor de categorie Tapijten. In plaats daarvan schatten we de prijs van het tapijt, afhankelijk van het gebied dat in de meting in de MR-sessie is berekend.

Een andere unieke eigenschap die de weergave in het MR-onderdeel biedt, is het schalen van objecten. U kunt de grootten van uw 3D-modellen extern bewerken door de eigenschappen Objectbreedte, Objecthoogte en Objectdiepte te wijzigen.

  • Stel de volgende eigenschappen in het eigenschappenvenster in, zoals wordt weergegeven in de afbeelding:

    • Objectbreedte = 1,5
    • Objecthoogte = 1
    • Objectdiepte = 1
    • Maateenheid = Meters

    Deze waarden worden ingesteld op basis van de 3D-modellen die in deze toepassing zijn opgenomen.

    Schermopname om het object te schalen voor weergave in MR.

    Notitie

    U kunt ook de waarden aanpassen die worden doorgegeven aan objectbreedte, objecthoogte en objectdiepte op basis van uw behoeften. De doorgegeven waarden worden genomen in de eenheden die zijn opgegeven in maateenheid. Kies een geschikte meeteenheid in de vervolgkeuzelijst en voer de waarden later in.

    Tip / Fooi

    Als u de voortgang wilt opslaan, selecteert u het tabblad Bestand bovenaan en selecteert u de optie Opslaan . U kunt ook Ctrl+S gebruiken om uw voortgang op te slaan.

Als u de bovenstaande stappen implementeert, wordt een toepassing geproduceerd met een detailpagina met gedetailleerde productinformatie. De toepassing bevat ook de weergave in het 3D-onderdeel , zodat u 3D-inhoud kunt opnemen. U kunt ook 3D-modellen in uw echte omgeving plaatsen via de component Weergave in MR. Nu u hebt geleerd hoe u deze functies kunt implementeren, kunt u deze opnemen in uw toekomstige toepassingen.

Animatie van de toepassingsdemo na de implementatieweergave in 3d en weergave in MR.