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.
W tej lekcji chciałbym, żebyśmy dodali jeszcze jedną interakcję do naszej ryby.
Mianowicie chciałbym, żeby coś się z nią stało w momencie, kiedy na nią klikniemy.
Ja w zasadzie w przerwie dodałem tę interakcję i pokażę Ci, jak to zrobić.
Zwróć uwagę, że kiedy kliknę na rybę, to ona troszkę zadrgała.
Ale jeżeli kliknę i przytrzymam klawisz myszy, to ona powiększa
się i wędruje do góry.
Jeżeli zwolni klawisz myszy, to wróci do swojej pozycji.
I zwalniam klawisz myszy.
Jak możemy to zrobić?
Został tutaj dodany dodatkowy event, który nazywa się Mouse Press i
dodatkowo też dodałem dwa stany.
Ja teraz ten stan dodatkowy usunę i usunę też ten event i pokażę Ci.
Co powinniśmy teraz zrobić?
Jak pewnie się domyślasz, potrzebny jest nam dodatkowy stan, czyli jak zawsze
mamy stan bazowy i stan dodatkowy.
Możemy każdy dodatkowy stan nazwać na przykład Big fish.
Powiedzmy.
Natomiast stanu bazowego nazwać nie możemy.
Tutaj wystarczy, że wybierzemy prawy klawisz myszy i możemy zduplikować albo
zmienić nazwę czy zresetować ustawienia.
Teraz przy tym drugim stanie po prostu podniesiemy
troszkę naszą rybę, obrócimy delikatnie w dół i może troszkę ją powiększymy.
Czyli mamy stan bazowy i stan bigfish.
Teraz dodajemy kolejny event i ten event nie będzie przy starcie, a w
momencie kiedy będzie działa się akcja o nazwie Mouse
Press, czyli wciśnięcie lewego klawisza myszy.
I co się wtedy stanie?
Wtedy zajdzie tranzycja, czyli to co już doskonale wiemy pomiędzy
stanem bazowym a Bigfish.
Teraz co ma dziać się pomiędzy tymi stanami?
Mamy tutaj is in out, czyli tak jak zawsze prędkość ruchu będzie
powoli przyśpieszać, a w momencie kiedy będziemy zbliżać się
do stanu Bigfish to ten ruch zwolni.
Ale możemy na przykład wybrać tutaj jeden z fajnych presetów, który nazywa się
Spring, czyli nasza ryba wykona taki bounce effect w momencie kiedy się
zatrzyma, to delikatnie zapsuje.
I teraz zobaczmy jak to wygląda.
Wybierzmy sobie play.
Następnie najeżdżam kursorem na rybę i przytrzymuję lewy klawisz myszy.
Widzimy, że ryba się powiększyła z takim fajnym efektem bounce i to samo zrobi.
Jeżeli ja zwolnię klawisz myszy to wtedy nasza ryba się zmniejszy, opadnie na
dół i też tak delikatnie związuje.
O, ale możemy teraz na przykład przejść tutaj i zdefiniować sobie
ustawienia tego tego bounce mamy tutaj masę, czyli.
Czyli ciężar naszej ryby możemy sobie zwiększyć na przykład do dwóch.
Dumping ustawmy sobie tutaj 20.
I teraz zobaczmy, jak to będzie działać.
Widzimy, że ten bounce już nie jest taki Widoczny jest bardzo
subtelny, ale jeżeli np.
Ustawimy sobie tutaj dumping np.
Powiedzmy na 1, to wtedy ten bonus będzie dużo
bardziej widoczny i będzie trwał dłużej.
Tak, widzimy, że jeszcze trwa tak naprawdę i to samo będziemy widzieć, jeżeli
zwolnimy lewy klawisz myszy i nasza ryba opadnie i zmniejszy się.
Widzimy, że działa to zbyt mocno.
Dlatego tutaj warto znaleźć jakiś dobry kompromis.
Ustawmy sobie na przykład dwanaście i zobaczmy teraz.
O, teraz chyba.
Wygląda to lepiej.
Kolejna opcja tutaj w tym secie Spring to Steveness, czyli sztywność.
Chyba tak to możemy przetłumaczyć.
Zmniejszmy tą wartość do 10 i zobaczmy jak teraz będzie się zachowywała nasze ryba.
Widzimy, że jest teraz taka bardzo ociężała i ten efekt bounce
nie działa tak jakbyśmy chcieli.
Ale jeżeli tę wartość ustawimy na przykład na sto, Ale jeżeli ustawimy tę wartość na
przykład na 100, to nasza ryba bardziej będzie podatna na nasze kliknięcia
i nie będzie już tak ociężała.
Mamy też Velocity ustawione na 0 Velocity, czyli nazwijmy to szybkość.
Ustawmy sobie tutaj na przykład 2 i teraz wybierzmy sobie play.
I ta ryba zachowuje się teraz bardzo fajnie.
Ląduje bardzo miękko, z takim bardzo przyjemnym, lekkim efektem Bounce.
Ok.
Dla mnie jest to jak najbardziej miarodajne i myślę, że możemy teraz
śmiało przejść do następnej lekcji.