Interaktywne Sceny 3D w Webflow
2 godz. 30 min · Grafika motion i 3D
Michał WedlechowiczSpline to nowoczesne narzędzie do projektowania 3D, które pozwala twórcom na łatwe i intuicyjne tworzenie interaktywnych modeli i scen 3D. Spline wyróżnia się przyjaznym dla użytkownika interfejsem, który umożliwia nawet początkującym projektantom szybkie i efektywne tworzenie trójwymiarowych obiektów. Aplikacja oferuje szeroką gamę narzędzi do modelowania, teksturowania oraz animacji, co pozwala na tworzenie zarówno prostych, jak i zaawansowanych projektów 3D. Dzięki wbudowanym funkcjom interakcji, projektanci mogą dodawać do swoich modeli elementy interaktywne, takie jak przyciski czy animacje, co sprawia, że tworzone sceny są nie tylko estetyczne, ale i funkcjonalne.
Spline integruje się z popularnymi platformami do tworzenia stron internetowych, takimi jak Webflow, co pozwala na bezproblemowe wstawianie stworzonych modeli 3D na strony WWW. Dzięki temu, użytkownicy mogą wzbogacać swoje witryny o interaktywne i dynamiczne elementy, które angażują odwiedzających i poprawiają ich doświadczenia. Aplikacja jest ceniona zarówno przez grafików, motion designerów, jak i UI/UX designerów za swoją elastyczność i możliwości, jakie oferuje w kontekście projektowania trójwymiarowego na potrzeby web designu. Spline staje się nieodzownym narzędziem w arsenale każdego nowoczesnego projektanta, który chce wyróżnić swoje projekty na tle konkurencji.
W trakcie kursu będziemy pracować z funkcjonalnościami Spline podczas tworzenia praktycznego projektu. Zbudujemy kreatywne sceny 3D, zoptymalizujemy na potrzeby www, dodamy interakcje i wdrożymy do Webflow, który od roku jest bardzo dobrze zintegrowany ze Spline. Stworzymy landing page produktowy z elementami 3D dającymi rewelacyjne doświadczenia użytkownikom, nauczymy się pracować z modelowaniem, budując customowe obiekty takie jak gamepady, działające modele klawiatur, czy sceny abstrakcyjne z eksplodującymi cząsteczkami. Nauczysz się dodawać Preview scen do projektów w Figmie, a także dodawać interakcje do swoich scen 3D bezpośrednio w Webflow.
W pierwszych rozdziałach kursu poznamy interfejs Spline. Zbudujemy podstawowe obiekty 3D i poznamy ich właściwości, którymi możemy sterować. Ponadto skonstruujemy podstawową scenę, oświetlimy ją a także dodamy tekstury i sprawdzimy jak działa na nie światło sceny. Następnie stworzymy bardziej zaawansowaną scenę, ale także zbudujemy bardziej realistyczne obiekty nadając im złożone tekstury i fakturę. Poznamy modyfikatory, które pozwolą na swobodnie sterować kształtami 3D i modelować je w przestrzeni.
Finałowa część kursu poświęcona będzie animacji i interakcji w Spline. Do zbudowanej wcześniej sceny dodamy animacje oraz triggery, dzięki, którym będziemy mogli sterować interakcją. Spline oferujue szereg narzędzi i udoskonaleń do interakcji takich jak tworzenie stanów obiektów i zdarzeń, Triggery, Eventy, Animacje, tranzycje, sterowanie dźwiękiem, kolizje, przełączanie kamery, Projektowanie systemów cząsteczkowych, kontrola i interakcja z systemem cząsteczkowym, zdarzenia follow, look at, scroll, mouse down, mouse Press, mouse hover, key Press i wiele więcej. na samym końcu szkolenia zintegrujemy nasz projekt z projektem strony internetowej w Webflow, gdzie będziemy mieli dostęp do każdego elementu 3D zbudowanego w Spline, ponieważ oba narzędzia są teraz mocno powiązane.
Kurs ten jest przeznaczony dla grafików, motion designerów, UI designerów oraz UX designerów, którzy chcą poszerzyć swoje umiejętności i dodać nowe narzędzia do swojego arsenału. Niezależnie od tego, czy jesteś początkującym, czy doświadczonym projektantem, ten kurs pomoże Ci od podstaw zapoznać się z interfejsem aplikacji Spline, a następnie stopniowo przejść do tworzenia bardziej zaawansowanych modeli i scen 3D. Nauczysz się także, jak dodawać interakcje, takie jak przyciski i animacje, które wzbogacą Twoje projekty. A na początek wystarczy Ci jedynie darmowa wersja Spline 3D do przerobienia tego kursu.
Ok, no to myślę, że możemy pracować dalej.
Więc zaznaczamy sobie.
Znowu animację split scroll.
Możemy oczywiście zrobić tak, żeby animacja kończyła się wcześniej, więc
musielibyśmy po prostu przesunąć sobie tą pozycję tą, która jest na 100% na przykład
tutaj do 80, ale może to zrobimy później.
Ja tutaj dodam znowu kolejną animację spline, więc znowu
muszę zaznaczyć nasz komponent Spline.
Ok, wybieram teraz + i Spline.
Teraz będziemy pracować ze sprężyną.
Czyli przechodzimy tutaj i element, który nas interesuje to Spring.
Dokładnie to.
I teraz przejdziemy sobie tu.
Tu też dodamy sobie animację spline i też będziemy pracować
Ze sprężyną, czyli Spring.
No i tutaj tą sprężynę możemy dać gdzieś tutaj.
Tutaj tą sprężynę.
No musimy ją ustawić w odpowiedniej pozycji, czyli gdzieś tu.
A tutaj w tym miejscu.
Ok, zapisujemy.
Zobaczmy podgląd.
O bardzo fajnie.
Myślę, że musimy ją troszeczkę podnieść.
Więc.
Tą początkową pozycję.
Ustawimy troszeczkę.
Wyżej.
Save.
Ok. No i wygląda to tak.
Tutaj ta sprężyna nie wyjeżdża.
Zaraz powiem Ci dlaczego.
Kiedy włączymy sobie tutaj tryb edycji i włączymy sobie live preview,
to zwróćmy uwagę jak to pracuje.
Widzimy, że kiedy ja scrolluje, to tutaj przesuwa się taki zielony play head i
dojeżdżam tutaj do końca strony, a play Head zatrzymuje się na 62%.
Wystarczy teraz, że te elementy, które są tutaj, tą całą grupę
przerzucimy sobie tak naprawdę gdzieś tutaj, w okolicy tego 62 procenta
na linii czasu.
Zaznaczmy sobie z Shiftem wszystkie te elementy i frame ustawmy
sobie na przykład na 60%.
I teraz wszystkie te elementy wylądowały tutaj.
Wybieram save i zobaczmy jak teraz działa animacja.
O właśnie, to jest dokładnie to, czego oczekiwałem.
No to co?
Zostało nam jeszcze rozmontowanie pozostałych elementów, jak ten
plastikowy, przeźroczysty i ten czerwony.
Więc wracamy do edycji.
Klikam na spline scroll.
I to co zrobimy teraz to dodamy sobie jeszcze tutaj kolejne.
Kolejną animację spline.
Więc klikam na nasz komponent.
Następnie wybieram Plus Spline.
Tym razem będziemy pracować z obiektem z grupą obiektów.
Może glass plastic.
Ok.
I może niech on będzie tutaj na jedynce.
Następnie tutaj klikam też na + wybieram spline.
I w tym miejscu to co nas interesuje to nie White a glass plastik I tutaj
przesuniemy to może troszkę w dół, o gdzieś tu.
Wybieram Safe.
No i wygląda całkiem fajnie.
To co jeszcze chciałbym.
Wykonać to kolejną animację dla tego czerwonego elementu.
I w zasadzie możemy zrobić to samo, czyli spline.
I tu wybieramy sobie Caps Joyner.
Ok, i tutaj też plusik spline.
I to co nas interesuje to Kapsliner i dajmy go troszkę do góry.
Na Tak, wybieram Safe.
Zobaczmy sobie podgląd.
Bardzo fajnie nam się to rozjeżdża.
No i okej, wygląda na to, że wykonaliśmy sporo fajnej roboty.
Ogólnie rzecz biorąc, to co tutaj mamy zrobione to jest tak naprawdę.
Cały sens współpracy z Plain i Webflow.
No bo widzimy, że możemy naprawdę robić świetne produktowe strony, albo też
dodawać całą masę różnych abstrakcyjnych wręcz animacji i doświadczeń.
Ta nasza klawiatura wygląda naprawdę bardzo fajnie.
Oczywiście warto też zadbać o to, żeby ona była jak najlżejsza,
więc możemy wrócić do Spline.
I tutaj zrobimy kilka rzeczy, Mianowicie.
Mianowicie te tekstury, które wykorzystywaliśmy bezpośrednio w aplikacji
Spline możemy podmienić na nasze własne.
Co oczywiście można zrobić, jeżeli wybierzemy sobie eksport,
a następnie run test.
To nie jest tak źle, ale wolałbym tutaj, żeby to były wartości w kilobajtach
i żebyśmy tutaj mieli też na zielono.
Mamy cztery tekstury.
To nie jest jakoś bardzo źle.
To nie znaczy, że to jest jakiś duży błąd.
To jest tylko po prostu coś, na co warto zwrócić uwagę.
I możemy tutaj zobaczyć podpowiedź, że warto unikać
stosowania tekstur, kiedy jest to możliwe.
No chyba, że stosujemy takie tekstury, które ważą po kilkadziesiąt
kilobajtów albo jeszcze mniej.
Dlatego ja proponuję, żebyśmy teraz np.
Wybrali sobie jakieś lekkie tekstury chociażby do np.
Naszego kijka psu tak.
I teraz odznaczam sobie wszystko i.
Mamy tutaj nasz Key Caps Material mamy tutaj.
Matka P. Mamy tutaj obraz.
Może załaduję sobie jakiś obraz swój taki lżejszy.
Replace image. Wybierzmy i Noise Bump, ok?
Następnie co?
Następnie wybierzemy sobie. Matka P.
I tutaj też zastosujemy coś, co ja wcześniej.
Sobie przygotowałem.
Czyli na przykład np.
To albo może to wybieram open.
Naturalnie mamy tutaj ustawiony screen.
Dalej mamy Black Key Caps.
Tutaj też mamy matchup, który korzysta z tekstur z split, więc ja sobie wybiorę
tą swoją własną, albo może inną.
Na przykład wybierzemy Replace image albo dodajemy nowy obraz.
I Replace image, a następnie wybierzemy sobie np.
To wybieram open, czyli wybieramy ten.
Ok, fajnie, mamy tutaj jeszcze teksturę.
Wybierzmy sobie tą leciutką.
Mamy Goldmetal 0.3 i tutaj mamy nawet dwa Matt capy, więc też sobie wybierzemy.
Może dodamy sobie tutaj jeszcze inny.
Wybierzmy Replace Image i na przykład niech to będzie to open.
O i super fajnie.
A tutaj.
Wybierzemy sobie na przykład ten.
No i ok, te tekstury są podmienione.
Możemy.
Wybrać sobie export, następnie Run test i zobaczmy co się stało.
Mamy poniżej 600 kilobajtów właśnie dlatego, że zastosowaliśmy nasze
własne tekstury, nasze własne lekkie pliki bitmapowe JPG, które są nieduże, ważą
kilka kilobajtów, więc udało nam się tutaj zaoszczędzić sporo.
Może być też tak, że kiedy zaznaczymy sobie jakiś obiekt, jak
chociażby to pokrętło i.
Kiedy ten cylinder będzie miał dużo tych swoich sites i ewentualnie zwiększymy
mu tą jakość, zaokrąglenia i cornerside, no to wtedy jednocześnie zwiększymy sobie.
Ilość poligonów i to też będzie wpływać negatywnie na nasz.
performance danej sceny, ale w tym przypadku jest wszystko ok, więc to co
teraz zrobimy to po prostu wybierzemy.
Update Viewer.
Do URL content has been updated.
Więc teraz możemy wrócić do Webflow.
I tutaj zwyczajnie złapiemy sobie ten element,
a następnie wybierzmy Reload Split Scan.
No i ok.
Całość wygląda elegancko i pracuje elegancko i te wszystkie interakcje
są naturalnie zachowane.
Ale najbardziej mi się podoba to.
Okej, to wszystko ode mnie.
Dzięki serdeczne za uwagę i przechodzimy dalej.