Ćwiczenie — Wyświetl w narzędziu MR i w widoku 3D

Easy-Sales to aplikacja rzeczywistości mieszanej zorientowana na sprzedaż, utworzona w celu poprawy jakości zakupów. Sprzedawcy korzystający z tej aplikacji mogą sprawdzać i mierzyć otoczenie klienta, aby określić, które produkty są możliwe w przestrzeni. Mogą również pomóc klientom wizualizować produkt za pomocą rzeczywistości mieszanej.

Wdrożymy funkcje widok w 3D i widok w MR usługi Power Apps, aby dokładnie wizualizować produkty.

Dodawanie obiektów 3D do listy programu SharePoint

Modele i obrazy 3D wymagane dla aplikacji są przechowywane na liście programu SharePoint . Zacznijmy od dodania wymaganych zasobów do tej listy.

1. Na utworzonej liście programu SharePoint o nazwie Easy Sales wybierz kolumnę + Dodaj , a następnie wybierz pozycję Pokaż/ukryj kolumny.

   

2. Upewnij się, że wybrano pozycję Załączniki , a następnie naciśnij przycisk Zastosuj u góry.

   

3. Wybierz element z listy, a następnie wybierz pozycję Dodaj załączniki. Wybierz model 3D (plik glb) lub obraz (plik.jpg) w folderze niestandardowym usługi Power Apps. Wykonaj tę samą procedurę dla wszystkich elementów na liście.

   

4. Wybierz listę rozwijaną obok kolumny Załączniki , a następnie wybierz pozycję Pokaż załączniki jako pierwsze. Chcemy, aby było to najpierw umieszczone w celu zapewnienia łatwego dostępu.

   

Utwórz stronę szczegółów i dodaj komponent View in 3D.

Strona szczegółów zawiera wszystkie szczegóły i informacje dotyczące wybranego produktu. Dzięki temu można zrozumieć niektóre funkcje produktu. Musisz połączyć stronę produktu zaprojektowaną w poprzedniej sekcji i stronę szczegółów utworzoną w tej sekcji. W tym miejscu do dodawania zawartości 3D do aplikacji kanwy użyjesz również składnika View in 3D usługi Power Apps. W celu uzyskania lepszego widoku będzie można obracać i powiększać obiekty 3D.

1. Utwórz dwie nowe strony i zmień ich nazwy Product_details i Carpet_details.

   

2. Wybierz ikonę > w kontrolce galerii uwzględnionej na stronie Produkty i dywanach . Następnie skonfiguruj właściwość OnSelect , dodając następujące wiersze na karcie Funkcje odpowiednio.

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

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

   

3. Zacznijmy tworzyć stronę Product_details , dodając kilka etykiet, takich jak Cena, Wymiary, Waga, Kolor i Materiał. Tekst wewnątrz etykiety można edytować, wstawiając żądany tekst we właściwości Text tej etykiety. Zmień odpowiednio nazwę etykiet .

   

   Notatka

   Możesz dostosować motyw, czcionkę i paletę kolorów aplikacji, aby poprawić środowisko użytkownika i wygląd.

4. Wstaw inną etykietę o nazwie Product name (Nazwa produktu ), aby wyświetlić nazwę produktu u góry i wyrównać ją do środka . Skonfiguruj właściwość Text etykiety, dodając następujący wiersz:

   content.'{Name}'
   

   

5. Wybierz listę rozwijaną Multimedia , a następnie wybierz pozycję Obraz , aby wstawić obraz na ekranie Product_details . Skonfiguruj właściwość Image w następujący sposób:

   content.ImageLink
   

   

6. Nałożymy składnik View in 3D (Widok w 3D) na składnik Image. Produkty, które nie mają dołączonych modeli 3D, można wyświetlić za pośrednictwem składnika Obraz . Aby dodać składnik Widok w 3D , wybierz listę rozwijaną Multimedia , a następnie wybierz pozycję Widok w 3D.

   

   Notatka

   Domyślny kształt jest uwzględniony w składniku. Ten kształt można zmienić na inny, zmieniając właściwość Source .

7. Umieść składnik nad składnikiem obrazu, jak pokazano na ilustracji, i skonfiguruj właściwość Source składnika Widok w 3D w następujący sposób, aby połączyć modele 3D z listy SharePoint.

   First(Gallery_products.Selected.Attachments).Value
   

   

8. Zmienimy właściwość Visible zarówno obrazu , jak i widoku w składnikach 3D , aby łatwo wyświetlać produkty w zależności od typu pliku przechowywanego w kolumnie Załączniki . Skonfiguruj właściwość Visibleobrazu i widoku w składnikach 3D w następujący sposób:

   • Obraz :

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

     

   • Widok w 3D :

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

     

9. Dodaj puste etykiety obok etykiet Cena, Wymiary, Waga, Kolor i Materiał , jak pokazano na ilustracji, aby wyświetlić informacje o produkcie pod tymi nagłówkami. Skonfiguruj właściwość Text tych etykiet w następujący sposób:

   • Cena :

     content.Price
     

     

   • Wymiary :

     content.Dimensions
     

     

   • Waga :

     content.Weight
     

     

   • Kolor :

     content.Color
     

     

   • Materiał :

     content.PrimaryMaterial
     

     

10. Dodamy ikonę Wstecz , aby przejść do poprzedniego ekranu. Aby dodać ikonę Wstecz , rozwiń listę rozwijaną Ikony i wybierz ikonę Wstecz. Umieść poprawnie ikonę Wstecz i skonfiguruj właściwość OnSelect , dodając następujące elementy:

    Navigate('Products',ScreenTransition.Cover)
    

    

    Wykonaj tę samą procedurę dla Carpet_details. Odpowiednio dostosuj funkcję Navigate .

    Napiwek

    Aby zapisać postęp, wybierz kartę Plik u góry i wybierz opcję Zapisz . Możesz również użyć Ctrl+S , aby zapisać postęp.

    Notatka

    Unikaj umieszczania komponentu View in 3D na stronie Szczegóły_Dywanów. Nie używamy modeli 3D dla kategorii Dywan .

Wyświetlanie w składniku MR

Widok w języku MR to funkcja rzeczywistości mieszanej udostępniana przez usługę Power Apps, która umożliwia użytkownikom umieszczanie obiektów 3D lub obrazów w ich środowisku rzeczywistym. Modele i obrazy 3D wymagane dla aplikacji są przechowywane na liście programu SharePoint . Zacznijmy od dodania niezbędnych zasobów na liście programu SharePoint .

1. Dodaj składnik Wyświetl w MR do ekranu Product_details. Otwórz kartę Wstawianie , a następnie rozwiń listę rozwijaną Rzeczywistość mieszana , a następnie wybierz pozycję Widok w składniku MR.

   

2. Na karcie Właściwości składnika Widok w MR wybierz pole Źródło i wprowadź dane, aby uzyskać dostęp do modeli 3D przechowywanych na liście SharePoint.

   First(Gallery_products.Selected.Attachments).Value
   

   

   Notatka

   W kategorii Dywany nie uwzględniamy funkcji Widok w języku MR. Zamiast tego będziemy szacować cenę dywanu w zależności od obszaru obliczonego w sesji 'Measure in MR'.

Kolejną unikatową właściwością udostępnianą przez składnik Widok w narzędziu MR jest skalowanie obiektów. Można zewnętrznie edytować rozmiary modeli 3D, zmieniając szerokość obiektu , wysokość obiektu oraz głębokość obiektu .

• Ustaw następujące właściwości w okienku właściwości , jak pokazano na obrazie.

  • Szerokość obiektu = 1,5
  • Wysokość obiektu = 1
  • Głębokość obiektu = 1
  • Jednostka miary = mierniki

  Te wartości są ustawiane zgodnie z modelami 3D zawartymi w tej aplikacji.

  

  Notatka

  Możesz również dostosować wartości przekazane do szerokości obiektu, wysokości obiektu i głębokości obiektu zgodnie z potrzebami. Przekazane wartości są pobierane w jednostkach określonych w jednostce miary. Wybierz odpowiednią jednostkę pomiarową z listy rozwijanej, a następnie wprowadź wartości.

  Napiwek

  Aby zapisać postęp, wybierz kartę Plik u góry i wybierz opcję Zapisz . Możesz również użyć Ctrl+S , aby zapisać postęp.

Zaimplementowanie powyższych kroków spowoduje utworzenie aplikacji ze stroną szczegółów zawierającą szczegółowe informacje o produkcie. Aplikacja będzie również zawierać komponent Widok 3D, co umożliwia dołączenie zawartości 3D. Modele 3D można również umieścić w środowisku rzeczywistym przy użyciu komponentu Zobacz w MR. Teraz, gdy już wiesz, jak zaimplementować te funkcje, możesz je uwzględnić w przyszłych aplikacjach.