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, wracamy do Spline i mam znowu nowy, czysty dokument.
Dodam teraz jakiś bardzo podstawowy obiekt i niech to będzie np.
Cube.
Ustawię tutaj tą kostkę, ewentualnie kliknę raz jeszcze
Cube i kliknę i przeciągnę.
Mogę to zrobić z shiftem, żeby stworzyć taki idealny sześcian z
w taki sposób, aby każda z jego ścian była zbudowana na planie idealnego kwadratu.
Ok, robię to z shiftem.
No i teraz jak wiemy z lekcji poprzednich, możemy sobie tutaj zaokrąglić te
krawędzie, ale ja nie będę tego robił.
Przejdę teraz do trybu Smooth and edit.
No i teraz widzimy, że ten ta nasza kostka nie wygląda jakoś
super pięknie, dlatego, że mam tutaj włączony.
Zawsze kiedy przechodzimy do Smooth włącza nam się z automatu
modyfikator Subdivision.
Czyli taki modyfikator, który uśrednia ilość
płaszczyzn w taki sposób, żeby zaokrąglić nasz obiekt i jest to bardzo przydatne.
Za chwilę zobaczysz jak to wygląda i jaki efekt nam daje.
Natomiast warto pamiętać o tym, że jeżeli jesteśmy w trybie smooth and the dead, to
u góry mamy zupełnie inny panel z zupełnie innymi narzędziami.
Pierwsze z takich narzędzi to.
Pierwsze trzy narzędzia służą do zaznaczania poszczególnych elementów,
z których składa się każdy obiekt 3D.
Każdy obiekt 3D składa się z poligonów, a każdy polygon to płaszczyzna, która
wyznaczona jest przez krawędzie.
A krawędzie wyznaczane są przez punkty, które nazywamy vertex ami.
Tutaj możemy zaznaczać całe płaszczyzny, na przykład tą płaszczyznę albo tą i każdą
z tych płaszczyzn możemy sterować dokładnie tak, jakbyśmy sterowali każdym
innym obiektem trójwymiarowym, czyli możemy ją przesuwać, obracać.
Naturalnie możemy ją też skalować.
Możemy również zaznaczać same krawędzie, czyli edge.
Możemy wybrać klawisz G i wtedy przełączymy się na zaznaczanie krawędzi.
Jeżeli chcemy zaznaczać płaszczyzny czyli face, to analogicznie wybieramy klawisz F.
I teraz mogę zaznaczyć sobie tą krawędź i też mogę ją przesunąć.
Mogę sobie ją przeskalować, co oczywiście wpływa na wygląd naszego obiektu.
No i oczywiście mamy też możliwość zaznaczenia vertex ów klawiszem V.
Przełączamy się w tryb zaznaczania vertex ów i też vertex y możemy sobie
zaznaczać, a następnie je przesuwać.
Jeżeli ustawimy się w ten sposób tutaj bardzo fajny mamy.
Taki kontroler do przestawiania sobie widoku.
Jeżeli np. Zaznaczymy sobie przeciągniemy sobie.
Takie pole zaznaczenia, pole selekcji.
W ten sposób to zaznaczają nam się wszystkie wertepy dookoła.
W ten sposób. Ale mogę przejść tutaj do ustawień i np.
Ustawić sobie selekcję tylko frontalną i jeżeli ja znowu przestawię się w ten
sposób, zaznaczę sobie te wertexy, to zaznaczyły się tylko wertexy z przodu,
natomiast te z tyłu widzimy nie są już podświetlone na żółto.
To samo tyczy się płaszczyzn czy czy edge krawędzi.
Wybierzmy sobie boks, ok?
No i jeśli chodzi o zaznaczanie tych elementów wiesz już
jak sobie z tym radzić?
Jeżeli wybierzemy sobie klawisz X no to wychodzimy z trybu smooth.
Edit Ale teraz już ten obiekt nie jest rozumiany jako Cube, jako predefiniowany
Cube, więc nie mamy tutaj możliwości wygładzenia krawędzi przykładowo.
Ale co możemy z tym zrobić?
O tym w lekcji następnej. No teraz to wszystko.
Dzięki serdeczne za uwagę.