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 popracujemy ze ścieżkami wektorowymi, które też możemy dodawać
i możemy budować jako obiekty 3D.
Ja tutaj przejdę do widoku z przodu naszej rybki i ma ona fajną buzię, ale byłoby
super, gdyby miała jeszcze jakieś usta.
Dlatego teraz możemy tutaj wybrać sobie narzędzie wektor i możemy sobie
postawić taki węzeł wektorowy.
Kolejny węzeł możemy sobie postawić w tym miejscu, przy czym przytrzymam lewy
klawisz myszy i przeciągnę sobie tutaj kursor w dół, tak żeby stworzyć punkty
kontrolne, które będą definiować krzywiznę.
Tutaj stworzę jeszcze jeden taki punkt. Mogę zrobić.
Też mogę przeciągać te wąsy z klawiszem Shift, wtedy ładnie mi to
tutaj pracuje w poziomie. Ok.
I jeszcze jeden punkt na przykład tutaj.
I też sobie dodamy te wąsy.
A tutaj sobie myślę, że możemy zamknąć naszą ścieżkę.
Ok, teraz zaznaczę sobie ten punkt, powiększę mu troszeczkę te wąsy.
Okej, tutaj mamy taki dosyć spiczasty fragment,
więc w momencie, gdy zaznaczymy sobie ten węzeł, możemy wybrać sobie narzędzie Bend
Tool i dodać sobie możemy tutaj też z Shiftem właśnie tego
rodzaju punkty kontrolne.
Ok, mamy już naszą ścieżkę, mamy nasz Shape,
możemy wybrać teraz Convert to Path.
I teraz przechodzimy do Puff Extrusion i zmniejszamy tutaj ten rozmiar size.
Ok. No i mamy taki fajny obiekt.
Możemy teraz dopasować go do kształtu ust naszej ryby.
Więc może przejdźmy do widoku z góry.
Zaznaczmy sobie wszystkie te węzły, a następnie przeniesiemy je tutaj.
I teraz zaznaczę ten boczny i przytrzymuję shift.
Zaznaczam ten drugi i doklejamy je w ten sposób.
O, i teraz wygląda to całkiem fajnie.
Myślę, że dobrze by było, gdybyśmy jeszcze tutaj to przenieśli troszkę dalej
i to również.
Bardzo fajnie.
Jeszcze zaznaczmy z Shiftem te 2 węzły i przenieśmy je bardziej do tyłu.
No i w ten sposób nasza rybka zyskała bardzo fajne usta.
Ale w momencie, kiedy ten obiekt jest zaznaczony, możemy jeszcze wrócić tutaj do
Paw Extrusion i mamy tutaj kilka bardzo fajnych opcji, o których warto wspomnieć.
Size jak wiemy definiuje nam rozmiar tego obrysu.
Mamy też dodatkowo Angle, gdzie możemy zmienić zakres obrotu tego
obrysu wzdłuż ścieżki.
Więc tutaj raczej wybierzmy 360.
Mamy też sites i mniejsza wartość przy size.
No to ten obrys jest bardziej kanciasty.
Mi zależy na tym, żeby był on bardzo taki fajny zaokrąglony, więc
wybierzmy sobie tutaj może 30.
Dalej deep, czyli głębia.
I tutaj w zasadzie nie wiem czemu to się nazywa głębia, ale
pracuje to w ten sposób.
Możemy po prostu troszeczkę odciąć ten obrys, stworzyć takie przecięcie.
I tutaj mamy np.
Offset, gdzie możemy sobie sterować pozycją tego obrysu na ścieżce.
Ale mamy też.
Ale mamy też coś takiego jak start scale, gdzie możemy tutaj na przykład w tym
miejscu troszeczkę ten obrys zawęzić.
Tutaj na przykład możemy też zawęzić, tutaj możemy pogrubić.
Więc tak to działa.
Upewnijmy się, że tutaj mamy wartość maksymalną, ale jeszcze jeżeli mamy tutaj
to przycięte, no to kolejna fajna opcja, o której warto wspomnieć to Caps.
Jeżeli wybierzemy sobie round, no to mamy tutaj te zakończenia bardzo fajnie
zaokrąglone, czym też możemy sobie tutaj sterować.
Wybierzmy sobie flat.
Tutaj upewnimy się, że mamy na max na maxa ustawione i mamy jeszcze coś takiego jak
subdivision samej ścieżki, bo po prostu może ona być nie zaokrąglona,
tylko taka bardziej kanciasta.
Jeżeli ten subdivision sobie zwiększymy, no to widzimy, że ona już wygląda bardziej
na bardziej wygładzoną i daje to fajniejszy efekt.
Ok, jeśli ja sobie teraz wyłączę ten X tutaj, no to po prostu przechodzimy do
tego obiektu jako do każdego innego obiektu, który możemy sobie zaznaczyć.
Przypominam, że Split wie, że to jest Shape i cały czas jeśli zaznaczymy sobie
ten obiekt, mamy tutaj do dyspozycji te wszystkie opcje, o których
teraz powiedziałem.
Ok, więc na teraz to wszystko w tej lekcji przechodzimy dalej.