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.
Witam Cię w kolejnej lekcji.
Myślę, że możemy teraz śmiało zabrać się za tekstury.
Ja tutaj w międzyczasie dodałem jeszcze kilka nowych obiektów.
Mianowicie jeszcze dodałem kolejny taki cylinder wokół tego, który już istnieje.
To samo z drugiej strony.
I jeszcze dodałem język.
A tak naprawdę to po prostu wziąłem sobie tą płetwę, zmniejszyłem
i wrzuciłem ją tutaj.
I teraz myślę, że powinniśmy ponazywać sobie warstwy.
Dlatego tutaj na przykład to nazwiemy sobie lips, czyli usta.
Następnie tutaj wpiszemy sobie płetwa top na przykład.
Ok, dalej mamy tail, czyli ogon.
To będzie język.
Chyba tak się pisze język po angielsku.
Nie jestem pewien. Mniejsza o to.
Tutaj mamy.
Tutaj mamy płetwę i będzie płetwa.
L czyli lewa to będzie płetwa.
R Czyli prawa.
Tutaj mamy te cylindry i tu możemy już pomału zacząć grupować nasze obiekty.
A bo mamy dwa takie obiekty.
Dwa cylindry, jeden większy, drugi mniejszy.
Możemy wybrać command g aby je zgrupować i nazwiemy to okular na przykład 1.
I tu mamy znowu z shiftem.
Mogę zaznaczyć te 2 cylindry, czyli ten i ten.
Możemy znowu wybrać command g i nazwać to okular powiedzmy 2.
Następnie mamy sferę.
Tutaj jeszcze zacząłem już dodawać materiały.
W przerwie możemy zwrócić uwagę, że tutaj mamy taki fajny, takie fajne szkiełko,
które daje bardzo fajny taki współczynnik załamania światła.
Zrobimy to również tutaj, na tym drugim oku, ale na razie ja sobie to usunę.
Nie jest mi to potrzebne.
To będzie.
Oko lewe.
To będzie.
Oko prawe.
W porządku, mamy też body.
No i zaczniemy od naszego body.
Zaznaczymy je sobie, a następnie.
Myślę, że byłoby fajnie, gdybyśmy tutaj wrzucili sobie jakieś fajne kolory, fajne
materiały, więc po zaznaczeniu naszego obiektu przechodzimy do prawego
panelu i mamy tutaj sekcję Material.
Mamy podstawowe dwie warstwy Lighting, które możemy wyłączyć i wtedy nasza
warstwa jest jakby nie posiada.
Światło nie oddziaływuje na nią w żaden sposób.
Mamy też warstwę color z kolorem głównym.
Możemy w każdej chwili kolor sobie zmienić,
ale jeżeli wybierzemy ikonkę plusa, no to mamy tutaj całą masę
ciekawych warstw i na przykład możemy wybrać sobie warstwę deep, czyli głębia.
Jest to warstwa, która działa bardzo fajny sposób.
Ona nadaje takiego ciekawego gradientu.
Jeżeli ja kliknę tutaj, to rozwijają mi się opcje tej warstwy.
I wybierzmy teraz command minus.
I mamy tutaj taki gradient, który możemy sobie sterować.
Wygląda to bardzo fajnie, ale ja chciałbym troszeczkę inaczej z tym popracować.
Przede wszystkim ten gradient jest troszeczkę za duży, więc
możemy na przykład przejść sobie tutaj.
Niżej i niżej ustawić sobie na 0, czyli idealnie na środku naszego obiektu.
A czyli tą najodleglejsze próbnik z kolorem możemy troszeczkę
sobie tutaj przesunąć na dół.
Całość, czyli cały ten gradient ustawi może w ten sposób po to, aby nasza rybka
była troszeczkę taka jaśniejsza od spodu, tak
żeby miała na przykład taki nieco powiedzmy większy brzuch.
W ten sposób możemy oczywiście ustawić to tak idealnie
wyśrodkować z naszym obiektem.
Co dalej?
No i teraz możemy oczywiście doprecyzować sobie konkretne kolory tego gradientu.
I na przykład ja bym chciał, żeby nasza rybka tutaj na samym dole, powiedzmy, była
w jakimś kolorze takim, powiedzmy nie wiem, jasnoróżowym.
A tutaj gdzie mamy kolor czarny, niech ma, powiedzmy, jakiś ciemnofioletowy.
Na przykład. W ten sposób widzimy tutaj pewien problem.
Jeżeli ja sobie kliknę gdziekolwiek, to po prostu odznaczam sobie naszą rybę.
Widzimy, że teraz światło z tej lampy w żaden sposób nie oddziaływuje na naszą
rybę, mimo że nasza ryba ma tutaj warstwę lighting.
Po prostu warstwa deep zakryła to, co jest pod spodem.
Jeżeli ja teraz warstwy Lighting ustawię sobie wyżej, no to widzimy, że teraz
wszystko już tutaj gra i wszystko wygląda Bardzo, bardzo ładnie, tak jak należy.
Dla każdej z tych warstw mogę ustalić jakiś tryb mieszania.
Lista trybów mieszania nie jest rozbudowana jakoś szczególnie, ale jeżeli
kliknę tutaj na te podwójne kółka, to mam cztery tryby mieszania do wyboru Normal,
Multiply, mnożenie, screen i overlay.
Jeśli wybiorę overlay.
No to fajnie nam się zmiesza to z tym kolorem, który jest pod spodem.
Ten kolor pod spodem możemy też przestawić na jakiś zupełnie inny i
będzie nam się tu fajnie tutaj mieszać.
Tak więc działa to w ten sposób.
Dodam tutaj jeszcze jeden.
Jeszcze jedną warstwę do naszego materiału.
Wybierając ikonkę z plusem i domyślnie zawsze dodawany jest kolor,
ale ja rozwinę opcje.
Jeszcze wybiorę sobie na przykład fresnel.
Fresnel to bardzo fajna warstwa, bardzo fajny efekt, który dodaje takiego efektu
glow na krawędziach wygląda to bardzo fajnie.
Znowu możemy nadać tutaj tryb mieszania, albo ewentualnie sterować
transparentnością, jeżeli będziemy sterować tą wartością.
Na przykład tutaj zamiast 100 ustawimy sobie 50.
No to po prostu ta warstwa będzie bardziej przeźroczysta.
Ale naturalnie możemy wybrać sobie tutaj np.
Overlay albo powiedzmy może screen color sobie ustawimy, może
jakiś bardziej czerwony albo.
Może coś w ten sposób.
Okej.
No i oczywiście możemy zwiększyć lub zmniejszyć skalę tego efektu, ale ja
chciałbym, żeby on był taki dosyć subtelny, niezbyt inwazyjny, więc
może zostawmy tak, jak wygląda.
Zaznaczmy naszą rybkę i znowu przejdźmy do Deep, czyli do głębi.
Tutaj możemy sterować tą ramką gradientu dokładnie w taki sam sposób, jak każdym
innym gradientem, w każdym innym programie czy aplikacji graficznej.
Wystarczy, że kliknę tutaj i dodaję sobie nowy kolor, który mogę na przykład
troszeczkę sobie rozjaśnić albo po prostu wrzucić tu zupełnie inne ubarwienie.
Na przykład takie.
I teraz nasza ryba wygląda w ten sposób.
Jeżeli przejdziemy tutaj niżej i wybierzemy sobie fazę, to ten najdalszy
próbnik troszeczkę sobie odsuniemy.
Okej.
Tutaj możemy na przykład zrobić coś takiego.
No.
I nasza rybka wygląda w ten sposób.
Myślę, że całkiem fajnie.
Przesuńmy to może troszeczkę do tyłu.
Okej, na razie to wszystko.
Dodaliśmy już materiał do pierwszego obiektu.
Myślę, że teraz śmiało możemy przejść do kolejnej lekcji, w której
popracujemy jeszcze z gradientami. A teraz to wszystko.
Dzięki serdeczne za uwagę.