Komponent Przeglądarka modeli 3D i Edytor 3D

Tego komponentu nie można używać w Google Ads, Google AdMob, reklamach AMP HTML, reklamach wideo ani reklamach graficznych.

Dzięki komponentowi Przeglądarka modeli 3D możesz umieścić w reklamie model 3D w formacie GLB, który użytkownicy mogą obracać, przesuwać i powiększać. Model możesz też skonfigurować w Edytorze 3D Google Web Designera.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Zgodność z przeglądarką

Microsoft Edge nie obsługuje komponentu Przeglądarka modeli 3D.

Aby dodać komponent Przeglądarka modeli 3D do projektu:

1. Otwórz panel Komponenty, a następnie folder Grafika i efekty.
2. Przeciągnij komponent Przeglądarka modeli 3D na scenę.
3. W sekcji Przeglądarka modeli 3D panelu Właściwości podaj plik GLB, którego chcesz użyć, jako Źródło. Kliknij przycisk Przeglądaj , by wybrać plik w systemie plików.
4. Kliknij dwukrotnie komponent na scenie, by otworzyć okno Edytora 3D i skonfigurować model. Gdy skończysz, kliknij Zapisz.

Możesz dostosować ustawienia Google Web Designera (Edytuj > Ustawienia… > Komponenty), by automatycznie tworzył komponent Przeglądarka modeli 3D w momencie, gdy przeciągasz plik GLB na scenę.

Właściwości

Właściwości komponentu znajdziesz w panelu Właściwości. (Musisz zamknąć Edytor 3D).

Właściwość	Opis
Nazwa	Nazwa komponentu Przeglądarka modeli 3D.
Źródło	Źródłowy plik GLB zasobu 3D. Rozmiar pliku zasobu nie powinien przekraczać 3 MB. Więcej wskazówek znajdziesz w Przewodniku po zasobach 3D. Możesz też skorzystać z walidatora Khronos glTF, aby sprawdzić, czy plik GLB jest prawidłowy.

Właściwości zaawansowane

Właściwość	Opis
Ikona podpowiedzi gestu	Obraz, który ma być wyświetlany nad modelem 3D, aby zachęcać użytkowników do interakcji z nim. Podpowiedź gestu nieznacznie się porusza do czasu osiągnięcia limitu animacji, aby zwrócić uwagę użytkownika, i znika, gdy użytkownik rozpocznie interakcję z modelem. Może być powiązana z danymi dynamicznymi.
Tekst podpowiedzi gestu	Tekst do wyświetlenia pod ikoną podpowiedzi gestu. Ma zastosowanie tylko wtedy, gdy wybrano taką ikonę. Może być powiązana z danymi dynamicznymi.
Ustaw limit animacji	Zaznacz to pole i podaj czas trwania w sekundach, aby ograniczyć czas wyświetlania animacji podpowiedzi gestu. Może być powiązana z danymi dynamicznymi.

Edytor 3D

Aby otworzyć okno edytora 3D:

• Kliknij dwukrotnie komponent Przeglądarka modeli 3D na scenie.

Zobaczysz podgląd modelu 3D, który możesz obracać i powiększać. Możesz też wchodzić w interakcje z dowolnymi interaktywnymi elementami.

Użyj panelu po prawej stronie, by skonfigurować model. Konfiguracje są uporządkowane na 2 głównych kartach: GLB i Komponent.

Karta GLB

Zmiany wprowadzone na karcie GLB są zapisywane w pliku źródłowym modelu w folderze zasobów. Dotyczy to wszystkich plików graficznych używanych jako tekstury, które zostaną zgrupowane w pliku GLB. W ustawieniach Google Web Designera możesz skonfigurować automatyczne usuwanie nieużywanych tekstur.

Informacje o pliku GLB
Źródło	Źródłowy plik GLB modelu 3D. To jest pole tylko do odczytu. Aby zmienić plik źródłowy, zamknij okno Edytora 3D i zmień właściwość Źródło komponentu w panelu Właściwości.
Szczegóły	Rozmiar – rozmiar pliku źródłowego.
Materiały
Materiały	W danym momencie możesz skonfigurować 1 materiał. Wybrane – na tej liście są wymienione wszystkie materiały używane w modelu 3D. Wybierz materiał, który chcesz wyświetlić lub edytować.
Kolor podstawowy	Kolor początkowy i tekstura do użycia w bieżącym materiale.
Metaliczna/chropowatość	Właściwości Metaliczna i Chropowatość określają, jak od materiału odbija się światło. Tekstura – wybierz teksturę, by określić, które części materiału są metaliczne. Metaliczna – wartość od 0 do 1, która wskazuje, jak bardzo materiał jest metaliczny. Im bardziej metaliczny materiał, tym więcej otoczenia się od niego odbija. Chropowatość – wartość od 0 do 1, która wskazuje poziom matowości materiału, co wpływa na ostrość odbijanego obrazu. 0 oznacza materiał całkowicie błyszczący, a 1 – całkowicie matowy.
Normalna mapa	Wybierz teksturę, by dodać do materiału drobne wypukłości i szczegóły powierzchni.
Świecąca	Wybierz kolor i teksturę, by odzwierciedlić blask materiału.
Okluzja	Wybierz teksturę, by oddać cienie występujące w świetle otoczenia.
Inne	Ustaw dodatkowe opcje materiału: Dwustronny – zaznacz to pole, jeśli materiał ma być dwustronny. Mieszanie alfa – wybierz sposób traktowania wartości alfa (przejrzystości) tekstur: Nieprzejrzystość – wartości alfa są ignorowane, tekstura jest zawsze całkowicie nieprzejrzysta. Mieszane – wartości alfa (od 0 do 1) są półprzejrzyste. Maskowanie – poszczególne części tekstury są całkowicie nieprzejrzyste lub całkowicie przejrzyste, w zależności od tego, jak ich wartość alfa wypada w porównaniu z podaną wartością graniczną alfa. Wartości alfa wyższe niż wartość graniczna oznaczają nieprzejrzystość.

Karta Komponent

Zmiany wprowadzone na karcie Komponent są odzwierciedlane w komponencie Przeglądarka modelu 3D, a nie w podstawowym pliku źródłowym GLB.

Pliki HDR

W komponencie Przeglądarka modeli 3D można używać plików graficznych HDR (High Dynamic Range) do tła i oświetlenia środowiskowego. Poszczególne pliki HDR muszą być mniejsze niż 150 KB. Aby zmieścić się w tym limicie, zalecamy zmianę rozmiaru dużych plików HDR na 256 × 128.

Prezentacja
Tło	Obraz – wybierz obraz lub środowisko (plik HDR), aby utworzyć tło. Może być powiązana z danymi dynamicznymi.
Oświetlenie środowiskowe (HDR)	Możesz użyć oświetlenia opartego na obrazie, aby uzyskać efekt szczegółowego oświetlenia wzorowanego na środowisku w świecie rzeczywistym. Obraz – wybierz zdjęcie sferyczne w formacie HDR, którego chcesz użyć. Może być powiązana z danymi dynamicznymi. Ekspozycja – poziom oświetlenia. Intensywność cienia – nieprzezroczystość cieni. Miękkość cienia – rozmycie krawędzi cieni.
Animacje	Jeśli źródłowy plik GLB zawiera animacje, możesz ustawić ich autoodtwarzanie. Obecnie Edytor 3D nie obsługuje tworzenia animacji. Domyślna – wybierz istniejącą animację, która ma być używana jako domyślna. Autoodtwarzanie – zaznacz to pole, by odtwarzanie domyślnej animacji rozpoczynało się po załadowaniu komponentu. Ustaw limit animacji – zaznacz to pole wyboru i wpisz liczbę sekund, po których automatyczne odtwarzanie animacji ma zostać wstrzymane.
Kamera
Początkowy widok kamery	Początkowy widok kamery określa ustawienia kamery po wczytaniu komponentu. Wymuszane są ustawione poniżej ograniczenia dotyczące obrotu kamery i powiększenia. Odchylenie – kąt obrotu kamery wokół osi pionowej wyrażony w stopniach. Pochylenie – kąt obrotu kamery wokół osi poziomej wyrażony w stopniach. Powiększenie – oddalenie kamery od modelu. Użyj bieżących jako początkowych – kliknij ten przycisk, jeśli masz dostosowany widok kamery w podglądzie okna Edytora 3D i chcesz używać bieżącego widoku kamery jako widoku początkowego.
Oś orbity	Oś orbity to punkt w przestrzeni 3D, wokół którego obraca się kamera. Domyślnie jest to środek modelu 3D. X – położenie osi orbity na osi X. Y – położenie osi orbity na osi Y. Z – położenie osi orbity na osi Z. Reset – przywróć domyślne współrzędne osi orbity.
Pole widzenia	Pionowe pole widzenia kamery. Kąt – kąt w zakresie od 1° do 179°.
Ograniczenia dotyczące obrotu kamery	Jeśli chcesz ograniczyć to, jak bardzo użytkownik może obrócić model, zaznacz pole Odchylenie lub Pochylenie i ustaw kąt minimalny oraz maksymalny. Odchylenie (od boku do boku) – zakres obrotu kamery wokół osi pionowej. Pochylenie (w górę i w dół) – zakres obrotu kamery wokół osi poziomej.
Ograniczenia dotyczące powiększenia	Typ – wybierz, czy chcesz ograniczyć użytkownikom możliwość powiększania modelu: Nieograniczona odległość kamery – brak ograniczeń. Jest to ustawienie domyślne. Ograniczona odległość kamery – ustaw minimalne i maksymalne przybliżenie. Minimalne powiększenie musi mieć wartość niższą niż maksymalne. Stała odległość kamery – użytkownik nie może powiększać modelu. Poziomy powiększenia minimalny i maksymalny muszą mieć ustawioną tę samą wartość.
Interaktywne elementy
Interaktywne elementy	Interaktywne elementy to punkty na modelu 3D, z którymi użytkownicy mogą wchodzić w interakcje. Możesz wyświetlić karty informacyjne lub skonfigurować zdarzenia wywoływane przez kliknięcie interaktywnych elementów. Dodaj interaktywny element – utwórz nowy interaktywny element. Po wybraniu tego przycisku kliknij punkt na modelu 3D, na którym chcesz ustawić interaktywny element. W kolejnych polach możesz go edytować. Nazwa – nazwa interaktywnego elementu. Kliknij ikonę Usuń  obok nazwy interaktywnego elementu, by go usunąć. Karta informacyjna – określa, czy kliknięcie interaktywnego elementu wywołuje kartę informacyjną: Brak – karta nie jest wywoływana. Karta informacyjna – wyświetla się karta informacyjna. Tytuł – tytuł wyświetlany na karcie informacyjnej. Może być powiązana z danymi dynamicznymi. Opis – tekst widoczny na karcie informacyjnej. Może być powiązana z danymi dynamicznymi.
Obraz	Możesz dostosować wygląd interaktywnych elementów za pomocą obrazów różnych stanów. Wszystkie interaktywne elementy wykorzystują ten sam zestaw obrazów. Góra – domyślny obraz używany, gdy użytkownik nie wchodzi w interakcję z interaktywnym elementem. Dół – obraz używany po kliknięciu interaktywnego elementu. Po najechaniu – obraz używany po najechaniu kursorem myszy na interaktywny element. Rozmiar – szerokość i wysokość interaktywnego elementu.
Style kart informacyjnych	Dostosuj wygląd karty informacyjnej, ustawiając jej kolory. Kolor czcionki – kolor tytułu i tekstu karty informacyjnej. Kolor tła – kolor tła karty informacyjnej. Kolor obramowania – kolor obramowania karty informacyjnej.

Zdarzenia i działania

Zdarzenia

Zdarzenia służą do wywoływania innych działań w reklamie. Komponent Przeglądarka modeli 3D wysyła te zdarzenia:

Zdarzenie	Opis
Wyrenderowano scenę 3D	Wysyłane po pierwszym wyrenderowaniu sceny z modelem 3D.
Zmieniono aparat	Wysyłane po zmianie jakiejkolwiek właściwości kamery 3D. Jeśli użytkownik dostosuje kamerę, obiekt event.detail zawiera właściwość source: user-interaction.
Kliknięto interaktywny element	Wysyłane po kliknięciu interaktywnego elementu (ustawionego w Edytorze 3D). Obiekt event.detail zawiera nazwę klikniętego interaktywnego elementu, jego indeks na liście interaktywnych elementów na scenie oraz jego współrzędne ekranowe X i Y.
Rozpoczęto interakcję	Wysyłane, gdy użytkownik rozpocznie interakcję z modelem 3D.
Zakończono interakcję	Wysyłane, gdy użytkownik zakończy interakcję z modelem 3D.

Aby wybrać 1 z tych zdarzeń w oknie Zdarzenie, ustaw komponent Przeglądarka modeli 3D jako element docelowy.

Działania

W odpowiedzi na zdarzenia komponent Przeglądarka modeli 3D może wywoływać te działania:

Zdarzenie	Opis	Opcje konfiguracji
Ustaw odchylenie	Powoduje ustawienie określonego odchylenia modelu (czyli jego obrotu wokół osi pionowej) i wstrzymanie animacji stanu spoczynku.	Odchylenie – kąt odchylenia w stopniach.
Ustaw docelowe odchylenie	Powoduje płynne obracanie modelu do ustawionego odchylenia.	Docelowe odchylenie – kąt odchylenia w stopniach (od -360 do 360).
Ustaw docelowy kąt	Powoduje płynne obracanie modelu do ustawionego kąta (czyli jego obrót wokół osi poziomej).	Docelowy kąt – kąt nachylenia w stopniach.
Zwiększ docelowy kąt	Powoduje płynne obracanie modelu do docelowego kąta o określoną wielkość. Jeśli model osiągnął już docelowy kąt, to działanie nie ma żadnego efektu.	Przyrost kąta – liczba stopni do dodania do obecnego kąta.
Ustaw docelowe powiększenie	Powoduje płynne powiększanie do ustawionego poziomu.	Docelowe powiększenie – poziom powiększenia (w metrach).
Zwiększ docelowe powiększenie	Powoduje wzrost docelowego powiększenia (w metrach).	Przyrost powiększenia – aby powiększyć obraz, użyj wartości ujemnej.
Ustaw docelową oś obrotu	Powoduje zmianę punktu, wokół którego następuje obrót, i płynne przesunięcie kamery do miejsca, w którym może ona orbitować wokół tego punktu.	Docelowa oś obrotu x – położenie na osi x (w metrach). Docelowa oś obrotu y – położenie na osi y (w metrach). Docelowa oś obrotu z – położenie na osi z (w metrach).
Ustaw docelowe przesunięcie lokalne	Powoduje płynne przesunięcie kamery do nowej pozycji.	Docelowe przesunięcie lokalne x – określane w metrach. Docelowe przesunięcie lokalne y – określane w metrach.
Ustaw kolor materiału	Umożliwia określenie koloru materiału.	Nazwa materiału Czerwony – wartość składowej czerwonej nowego koloru (od 0 do 1). Zielony – wartość składowej zielonej nowego koloru (od 0 do 1). Niebieski – wartość składowej niebieskiej nowego koloru (od 0 do 1).
Odtwórz animację	Powoduje odtworzenie wskazanej animacji.	Nazwa animacji
Wstrzymaj animację	Powoduje wstrzymanie wskazanej animacji.	Nazwa animacji
Ustaw czas animacji	Umożliwia przeskok do określonego punktu czasowego animacji.	Nazwa animacji Czas animacji – punkt czasowy (w sekundach), do którego ma nastąpić przeskok.

Gdy wybierzesz 1 z tych działań w oknie Zdarzenie, ustaw komponent Modelowanie jako odbiornik.

Zaawansowane metody API

Możesz użyć dodatkowej metody, wykorzystując kod niestandardowy.

getCameraDetails()

Zwraca obiekt ze szczegółowymi informacjami o bieżących ustawieniach kamery.

Właściwości zwróconego obiektu:

• yaw – kąt obrotu wokół osi pionowej wyrażony w stopniach.
• pitch – kąt obrotu wokół osi poziomej wyrażony w stopniach.
• zoom – poziom powiększenia wyrażony w metrach.
• x – położenie na osi X, wokół której porusza się kamera, wyrażone w metrach.
• y – położenie na osi Y, wokół której porusza się kamera, wyrażone w metrach.
• z – położenie na osi Z, wokół której porusza się kamera, wyrażone w metrach.

Doświadczeni użytkownicy mogą też zapoznać się z dokumentacją na stronie https://modelviewer.dev.

Podgląd

Podgląd komponentu Przeglądarka modeli 3D można wyświetlić tylko w Edytorze 3D lub w przeglądarce, klikając przycisk Podgląd w prawym górnym rogu.