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.
Nasz klawisz działa i wszystko jest ok.
Natomiast chciałbym tutaj w tej lekcji dodać jeszcze dwie rzeczy.
Pierwsza z nich to do eventu Mousedown, czyli do tego zdarzenia, kiedy
użytkownik klika na przycisk.
Chciałbym dołączyć jeszcze odtwarzanie dźwięku, czyli tutaj dodamy sobie
poza tą tranzycją jeszcze jedną akcję.
Tą tranzycję możemy sobie zwinąć.
Wybieram ikonkę plusa i będzie to sound.
Chciałbym, żeby w momencie kiedy użytkownik kliknie
odtworzył się dźwięk, więc przechodzę tutaj.
Interaction ustawiamy na Play i musimy tutaj załadować plik dźwiękowy.
Wybieram upload i mam tutaj taki plik dźwiękowy.
Pressing Enter on keyboard On brzmi w ten sposób wybieram open,
ładuję go tutaj i jedyna interakcja jaka tutaj zajść to po prostu play.
Tu możemy sobie ustawić oczywiście głośność, opóźnienie, zapętlanie,
ale nie chcę nic takiego.
Po prostu chcę, żeby ten przycisk w momencie, kiedy użytkownik naciśnie.
Chciałbym, żeby po prostu odtworzył dźwięk.
Ok, no i zobaczmy jak to działa.
W porządku, moim zdaniem ten klawisz troszeczkę za wolno się wciska, więc.
Więc tutaj przejdziemy sobie przy klawiszu do mousedown, do tranzycji i ten moment
wciśnięcia musimy maksymalnie przyśpieszyć.
Na przykład powiedzmy 0,01.
Zobaczmy teraz o.
Teraz.
Moim zdaniem wygląda to lepiej, ma więcej energii.
Może delikatnie go spowolnimy.
Tak, Mousedown I tutaj ustawimy sobie może 0,1.
Zobaczmy czy to nie będzie za wolno.
Moim zdaniem troszeczkę za wolno, więc ustawmy sobie tutaj może 0,05.
O i teraz jest idealnie.
To co jeszcze zrobimy do naszej grupy to dodamy tutaj bitmapę.
Wybierzemy sobie plus, a następnie dodamy sobie tutaj plane.
Klikam i przeciągam.
Następnie ustawmy się tutaj.
Podniesiemy sobie tą naszą płaszczyznę.
Na pewno musimy włączyć sobie snapping.
Ok. Umieśćmy sobie ją tu.
W porządku.
Tutaj też sobie przenieśmy na środek naszego obiektu
i delikatnie dajmy ją do góry.
To co chciałbym tutaj zrobić, to dodamy sobie do niej materiał.
Mianowicie nie chciałbym, żeby to był żaden kolor.
Po prostu chciałbym, żeby to był image, czyli obraz.
Klikam tutaj, a następnie wybieram ikonkę z plusem.
A następnie przechodzę to Replace image.
Przechodzę do źródeł.
Mam tutaj key png i na przykład możemy sobie tutaj dodać jakąś literkę.
Niech to będzie np. Litera wu.
Wybieram open i ten plain wrzucę do naszej grupy Key Caps.
Tak?
Teraz jeżeli wybierzemy sobie play.
No to mamy nasz klawisz oznaczony literką W.
Bardzo fajnie.
W tej lekcji to wszystko.
Myślę, że możemy teraz przejść na krótką przerwę i do usłyszenia
w lekcji następnej.