Øvelse – Vis i MR og Vis i 3D

  • 15 minutter

Easy-Sales er et salgsorientert mixed reality-program som er bygget for å forbedre handleopplevelsen. Selgerne som bruker dette programmet, kan undersøke og måle kundens omgivelser for å finne ut hvilke produkter som er gjennomførbare i området. De kan også hjelpe kunder med å visualisere produktet gjennom blandet virkelighet.

Vi implementerer visning i 3D- og visning i MR funksjoner i Power Apps for å visualisere produkter nøyaktig.

Legge til 3D-objekter i SharePoint-listen

3D-modellene og bildene som kreves for programmet, lagres i SharePoint-listen. La oss starte med å legge til de nødvendige ressursene i denne listen.

  1. Velg + Legg til kolonne i listen SharePoint med navnet Enkelt salg, og velg deretter Vis/skjul kolonner.

    Skjermbilde for å legge til kolonne.

  2. Kontroller at Vedlegg er valgt, og trykk deretter på Bruk øverst.

    Skjermbilde for å bruke vedlegg

  3. Velg et element i listen, og velg deretter Legg til vedlegg. Velg 3D-modell (GLB-fil) eller Bilde (.jpg fil) i den egendefinerte mappen Power Apps. Følg samme fremgangsmåte for alle elementene i listen.

    Skjermbilde for å legge til vedlegg

  4. Velg rullegardinlisten ved siden av kolonnen Vedlegg, og velg deretter Vis vedlegg først. Vi ønsker at det skal plasseres først for enkel tilgang.

    Skjermbilde for å velge Vis vedlegg først.

Opprett detaljsiden, og legg til Visningen i 3D-komponenten

Detaljsiden inneholder alle detaljer og informasjon om det valgte produktet. Det gir deg en forståelse av visse funksjoner i produktet. Du må koble til produktsiden du utformet i forrige inndeling, og detaljsiden som ble opprettet i denne inndelingen. Her bruker du også Visning i 3D- komponenten i Power Apps til å legge til 3D-innhold i lerretsappen. Du kan rotere og zoome inn på 3D-objekter for en bedre visning.

  1. Opprett to nye sider, og gi dem nytt navn Product_details og Carpet_details.

    Skjermbilde av oppretting av detaljerte sider.

  2. Velg >-ikonet i gallerikontrollen som er inkludert på siden Produkter og tepper side. Deretter konfigurerer du OnSelect-egenskapen ved å legge til følgende linjer i henholdsvis Funksjoner-fanen.

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

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

    Skjermbilde av navigasjon til neste detaljer.

  3. La oss begynne å bygge Product_details siden ved å legge til noen etiketter, for eksempel pris, dimensjoner, , fargeog material. Du kan redigere teksten i etiketten og sette inn ønsket tekst i egenskapen Text for Label. Gi nytt navn til etiketter tilsvarende.

    Skjermbilde av å legge til etiketter

    Notat

    Du kan tilpasse temaet, skriften og fargepaletten i programmet for å forbedre brukeropplevelsen og utseendet.

  4. Sett inn en annen etikett med navnet Produktnavn for å vise produktnavnet øverst, og midtstill det. Konfigurer egenskapen Text for etiketten ved å legge til følgende linje:

    content.'{Name}'

    Skjermbilde av å legge til titteletikett.

  5. Velg rullegardinlisten Media, og velg deretter bilde for å sette inn et bilde på Product_details-skjermen. Konfigurer egenskapen Bilde på følgende måte:

    content.ImageLink

    Skjermbilde av å legge til bilde.

  6. Vi overlapper -visningen i 3D- komponenten over komponenten Bilde. Produktene som ikke har 3D-modeller knyttet til seg, kan vises gjennom komponenten Bilde. Hvis du vil legge til Visning i 3D--komponenten, velger du rullegardinlisten Media og velger deretter Vis i 3D-.

    Skjermbilde av å legge til visning i 3D.

    Notat

    En standardfigur er inkludert i komponenten. Du kan endre denne figuren til en annen ved å endre egenskapen Source.

  7. Plasser komponenten over bildekomponenten, som vist på bildet, og konfigurer Source-egenskapen for View i 3D--komponenten som følger for å koble 3D-modeller fra SharePoint-listen.

    First(Gallery_products.Selected.Attachments).Value

    Skjermbilde av konfigurasjon av visning i 3D.

  8. Vi endrer egenskapen Synlig for både Bilde- og Visning i 3D- komponenter for enkelt å vise produktene, avhengig av filtype lagret i Vedlegg-kolonnen. Konfigurer egenskapen Synlig for Bilde- og visning i 3D- komponenter på følgende måte:

    • bilde:

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

      Skjermbilde av endring av synlighet for bilder.

    • visning i 3D-:

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

      Skjermbilde av endring av visning i 3D-synlighet.

  9. Legg til tomme etiketter ved siden av Price, Dimensions, Weight, Colorog Material etiketter som vist på bildet for å vise produktinformasjonen under disse overskriftene. Konfigurer egenskapen Text for disse etikettene på følgende måte:

    • pris:

      content.Price

      Skjermbilde av tom etikett for pris.

    • dimensjoner:

      content.Dimensions

      Skjermbilde av tom etikett for dimensjon.

    • vekt:

      content.Weight

      Skjermbilde av tom etikett for vekt.

    • farge:

      content.Color

      Skjermbilde av tom etikett for farge.

    • material:

      content.PrimaryMaterial

      Skjermbilde av tom etikett for materiale.

  10. Vi legger til et Tilbake-ikon for å navigere til forrige skjerm. Hvis du vil legge til ikonet Tilbake, utvider du rullegardinlisten Ikoner og velger Tilbake-ikonet. Plasser ikonet Tilbake riktig, og konfigurer OnSelect-egenskapen ved å legge til følgende:

    Navigate('Products',ScreenTransition.Cover)

    Skjermbilde av å legge til tilbake-ikonet og OnSelect-

    Følg samme fremgangsmåte for Carpet_details. Tilpass funksjonen Navigate tilsvarende.

    Tips

    Hvis du vil lagre fremdriften, velger du fanen Fil øverst og velger alternativet Lagre. Du kan også bruke CTRL+S til å lagre fremdriften.

    Notat

    Unngå å inkludere Visning i 3D--komponenten på Carpet_details-siden. Vi bruker ikke 3D-modeller for kategorien Carpet.

Vis i MR-komponent

Visning i MR er en funksjon for blandet virkelighet levert av Power Apps som gjør det mulig for brukere å plassere 3D-objekter eller Bilder i deres virkelige miljø. 3D-modellene og bildene som kreves for programmet, lagres i SharePoint-listen. La oss starte med å legge til de nødvendige ressursene i SharePoint-listen.

  1. Legg til visning i MR-komponenten på Product_details-skjermen. Åpne Sett inn-fanen, utvid rullegardinlisten Blandet virkelighet, og velg deretter Visning i MR--komponenten.

    Skjermbilde av å legge til visning i MR-knappen.

  2. Velg Kilde-feltet i kategorien egenskaper for visning i MR-komponenten, og angi for å få tilgang til 3D-modellene som er lagret i SharePoint-listen:

    First(Gallery_products.Selected.Attachments).Value

    Skjermbilde for å legge til kilde for visning i MR.

    Notat

    Vi inkluderer ikke View i MR-funksjonen for kategorien Tepper. I stedet vil vi estimere Pris av teppet avhengig av området beregnet i Mål i MR økten.

En annen unik egenskap Visning i MR-komponenten gir, er objektskalering. Du kan redigere størrelsen på 3D-modellene eksternt ved å endre objektbredde, objekthøydeog objektdybde egenskaper.

  • Angi følgende egenskaper i egenskapsruten som vist på bildet:

    • Objektbredde = 1,5
    • objekthøyde = 1
    • objektdybde = 1
    • måleenhet = meter

    Disse verdiene angis i henhold til 3D-modellene som er inkludert i dette programmet.

    Skjermbilde for å skalere objektet for visning i MR.

    Notat

    Du kan også tilpasse verdiene som sendes til objektbredde, objekthøydeog objektdybde etter dine behov. Verdiene som sendes, tas i enhetene som er angitt i måleenhet. Velg en passende måleenhet fra rullegardinlisten, og skriv inn verdiene senere.

    Tips

    Hvis du vil lagre fremdriften, velger du Fanen Fil øverst og velger alternativet Lagre. Du kan også bruke CTRL+S til å lagre fremdriften.

Implementering av trinnene ovenfor vil produsere et program med en detaljside som inneholder detaljert produktinformasjon. Programmet inkluderer også Visning i 3D- komponent, slik at du kan inkludere 3D-innhold. Du kan også plassere 3D-modeller i ditt virkelige miljø via View i MR-komponenten. Nå som du har lært hvordan du implementerer disse funksjonene, kan du innlemme dem i fremtidige programmer.

Animasjon av programdemoen etter implementering av visning i 3d og visning i MR.