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, mamy nasz klawisz.
To co chciałbym teraz zrobić, to może usunąć tutaj ten cloner,
Przynajmniej na razie.
Więc wyłączmy sobie go i to co teraz zrobimy to dodamy mu efekt hover.
Czyli stworzymy sobie dwa stany.
Ale najpierw zanim to zrobimy, stwórzmy z tego grupę.
Wybieram Command g i będzie to nasza grupa.
Czyli to będzie Key caps.
Ok, damy tej grupie dwa stany, więc wybieram +.
Przy sekcji States mamy base state oraz State i event.
Chciałbym żebyśmy tutaj dodali sobie tranzycję, ale zanim to
dodamy to ten stan drugi niech przedstawia nasz klawisz ułożony nieco niżej.
Ok, czyli mamy coś takiego.
I teraz przechodzimy do Mouse hover, czyli po najechaniu
Transition caps i będzie to SpaceState State.
I teraz na przykład niech tutaj ten efekt będzie w formie
takiego bansu, czyli Spring.
No i wybierzmy sobie play.
Zobaczmy jak to działa.
No i dobra, nasz efekt hover działa.
Wygląda na to, że jest wszystko w porządku.
A teraz co się stanie, kiedy użytkownik kliknie myszą na ten klawisz?
Jak możemy to zrobić?
Do naszej grupy Caps dodamy jeszcze trzeci stan.
Ten stan tak naprawdę tutaj możemy nazwać hover.
I dodajmy jeszcze jeden stan, który będzie klikiem.
I przeniesiemy nasz klawisz jeszcze niżej.
Okej.
No i teraz dodajemy sobie nowy event.
Bedzie to Mousedown i tu będzie tranzycja.
Ta tranzycja będzie odbywała się z current, czyli aktualnej pozycji i będzie
przechodzić do kliknięcia, czyli do tego najniższego poziomu naszego klawisza.
I niech to trwa dosyć szybko, na przykład 0,3 sekundy i tryb ustawiamy nie ONZ,
tylko repeat each time, czyli za każdym razem będziemy to powtarzać.
No i teraz wybierzmy sobie play.
Mamy hover.
I kliknięcie, które coś tu nie bardzo działa.
Hover. I kliknięcie.
Ale widzimy, że nasz przycisk nie powraca do swojego pierwotnego stanu.
Co tutaj musimy zrobić?
Przede wszystkim dodamy sobie jeszcze jedną tranzycję.
I w tej, w tym w tym trzecim kroku powrócimy do Base State.
I też niech to trwa 0,3 sekundy. Wybieram play.
I zobaczmy teraz najeżdżam, mamy hover i klikam.
I przycisk wraca.
Pięknie, ale mamy jeszcze jeden back.
Zobaczmy jak to wygląda.
Najeżdżam kursorem na klawisz, klikam i faktycznie nasz klawisz kliknął
i wrócił do swojego stanu wyjściowego.
Ale kiedy zjedziemy z.
Czyli to base state.
Ale kiedy zjedziemy myszą z klawisza dzieje się coś takiego.
Brzydko to wygląda, prawda?
Zobaczmy jeszcze raz najeżdżam.
Mamy hover click i zjeżdżam.
No i ogólnie nie wygląda to dobrze.
Więc co możemy tu zrobić?
Wyjdźmy z trybu podglądu i kiedy jesteśmy w.
Evencie Mousedown to tutaj z kliku nasz przycisk musi wrócić
nie do Base State, tylko do Current position, czyli do pozycji, w
której znajduje się w stanie hover.
Wybieram play. I zobaczmy.
Najeżdżam kursorem na klawisz.
Mamy efekt hover.
Klikam i klawisz znowu wraca do efektu hover.
A teraz wraca do swojego base state.
Kiedy zjadę myszką z niego, zobaczmy jeszcze raz.
Najeżdża. My mamy hover.
Klikam.
Klawisz wraca do stanu hover, a kiedy zjadę płynnie wraca do stanu base.
Dokładnie o to nam chodziło.
W porządku.
Dodaliśmy do naszej grupy trzy stany i dwa eventy.
W tej lekcji to wszystko.
Dzięki za uwagę i przechodzimy dalej.