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.
Przechodzimy teraz do nowego rozdziału, w którym porozmawiamy o akcji i interakcji.
Chciałbym, żeby nasza ryba poruszała swoimi płetwami i ogonem.
I jak możemy to zrobić?
Jeżeli ja zaznaczę naszą płetwę i zacznę ją obracać, no to widzimy, że nie do
końca obraca się ona tak, jakbym chciał.
Chciałbym, żeby ten punkt odniesienia znajdował się tutaj,
dlatego jest taka tutaj opcja, która pozwala nam na przeniesienie tego anchor
pointa, czyli tych uchwytów w dowolne miejsce naszego obiektu.
Wystarczy, że przytrzymamy klawisz Alt i klikniemy na nasz obiekt w panelu Object.
Czasem jednak to nie działa, dlatego musimy zaznaczyć nasz obiekt i
wybrać Command g, aby go zgrupować.
Teraz taką grupę możemy nazwać na przykład Płetwa.
Group.
I teraz jeżeli kliknę z Altem na tę grupę, no to widzimy, że pojawia się tutaj taki
kwadracik wokół tych uchwytów I teraz mogę przesuwać sobie te uchwyty, mogę przesuwać
sobie ten anchor point na przykład tu, w tym miejscu.
Ten punkt zakotwiczenia, ok.
I gotowe. Klikam na naszą grupę.
I teraz jeżeli ja tutaj zacznę obracać tą płetwą, no to ona
obraca się dokładnie tak jakbym chciał.
Teraz dodam do tej płetwy tak zwane stany, czyli przechodzimy tutaj i mamy tutaj taką
sekcję, w której dodajemy stany oraz zdarzenia.
Ja tutaj wybiorę ikonkę plusa przy States i automatycznie mamy base state, czyli
stan bazowy i stan dodatkowy, na przykład w stanie bazowym.
Nasza płetwa niech będzie ułożona na przykład w ten sposób,
może troszkę bardziej. Do góry.
Ok, a przy tym stanie dodatkowym damy ją na dół i może troszkę bardziej do tyłu.
Czyli mamy basestate i state.
I teraz do tego obiektu dodamy event, czyli zdarzenie.
Wybieram ikonkę plusa i chciałbym, aby to zdarzenie działo się od razu
przy starcie naszej animacji.
Czyli wybieram start, a następnie transition, czyli tranzycja
dokładnie mówiąc przejście ze stanu bazowego do stanu dodatkowego.
I niech to trwa na przykład jedną sekundę.
Chciałbym, żeby działo się to w nieskończoność, więc przechodzę tutaj i
wybieram lub a następnie Infinity, czyli nieskończoność.
I teraz mamy tutaj coś takiego jak cykle, czyli cykl.
Chciałbym, żeby ten cykl ustawiony był na ping pong.
Co to oznacza?
Że jeżeli nasza płetwa przejdzie ze stanu bazowego
do stanu dodatkowego, to potem płynnie wróci ze stanu dodatkowego
do stanu bazowego.
I tak w kółko.
Zobaczmy jak to wygląda.
Jeśli wybiorę sobie play.
Przejdziemy do podglądu.
Bardzo fajnie.
To samo możemy zrobić z drugą płetwą.
Zaznaczmy ją.
Następnie wybierzmy command g, aby utworzyć z niej grupę.
Klikam z Altem na grupę.
Przeniesiemy sobie Anchor point tutaj ok.
I znowu dodamy sobie stany baseState.
Ok. I stan dodatkowy.
W ten sposób.
Do naszej płetwy dodajemy również event, który dzieje się przy starcie
i jest to tranzycja, czyli przejście z basestate do state.
Ustawiamy nieskończoność i cykl przestawiamy na pingpong.
No i wygląda całkiem fajnie.
Co jeszcze mamy?
Warto też popracować nad ogonem.
Zamkniemy go w grupie.
Grupę nazwiemy sobie Table.
Group.
Ok.
Klikam z Altem na naszą grupę.
przenosimy sobie anchor point.
Tutaj w porządku.
I znowu wybieramy State Base State.
Niech wygląda na przykład tak.
State Niech wygląda tak.
No i dodamy zdarzenie Start Transition State State.
Może niech to trwa szybciej.
Na przykład 0,7 sekundy w nieskończoność.
I cykl ustawiamy na pingpong.
Super, bardzo fajnie.
To jest oczywiście nie wszystko co tutaj stworzymy i wychodzimy z trybu podglądu.
Myślę, że jeszcze tutaj warto dodać troszeczkę więcej interakcji i animacji.
Tym zajmiemy się w lekcjach następnych. A teraz to wszystko.
Do usłyszenia.