Spline 3D: Switch - zaawansowane modelowanie
Interaktywne Sceny 3D w Webflow
2 godz. 30 min · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Poznanie interfejsu Spline
- Nauka poruszania się po narzędziach
- Tworzenie predefiniowanych obiektów
- Praca z polygonami oraz modyfikatorem Subdivision
- Modelowanie customowych kształtów
- Tworzenie rozbudowanych materiałów
- Dodawanie tekstur i oświetlenia
- Projektowania zdarzeń i animacji
- Zaawansowane interakcje w Spline
- Budowanie stanów obiektów i zarządzenie nimi
- Opcje eksportu
- Wdrażanie scen 3D w projektach Webflow
Czym jest Spline
Spline 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.
Przewaga rynkowa dzięki Spline
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.
Co w kursie
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.
Interfejs i modelowanie
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.
Interakcje i wdrażanie
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.
Dla kogo jest ten kurs?
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.
Cześć! Witam Cię w kolejnej lekcji.
Na pewno warto nazwać nasze pliki, więc możemy wybrać prawy klawisz myszy,
a następnie rename tutaj.
Jestem teraz fullscreenie i nazwiemy to Keyboard.
Następnie tutaj naszą rybę nazwiemy Fish.
I teraz chciałbym stworzyć jeszcze jeden projekt, troszeczkę mniejszy,
z wykorzystaniem elementów z naszej klawiatury, więc może ten
dokument sobie zduplikuję.
Wybieram prawy klawisz myszy, a następnie duplicate i nazwiemy nazwiemy ten
dokument nie Keyboard copy, a.
Key caps and switch.
Ok, klikam tutaj i będę chciał tutaj usunąć sporo rzeczy.
Na pewno nie będzie nam potrzebna cała klawiatura.
Raczej chciałbym skupić się na pojedynczym elemencie, a w tym przypadku
chodzi mi głównie o ten komponent.
Myślę, że możemy go sobie gdzieś tutaj wyjąć z naszej grupy,
bo nie będzie nam jakoś szczególnie potrzebny, a całą resztę, całą tą
klawiaturę możemy sobie usunąć.
Ten element.
Ustawimy sobie tutaj mniej więcej na środku.
I będę chciał tutaj dorobić kilka dosyć istotnych rzeczy.
Możemy usunąć wszystkie stany i eventy.
Nie będą nam one teraz potrzebne na tym etapie przynajmniej.
I zrobimy tutaj kilka rzeczy.
Przede wszystkim klikam dwukrotnie na nasz key shape.
I tutaj zaznaczymy Sobie raz, dwa, trzy, cztery te płaszczyzny, a następnie wybiorę
sobie insert faces i po prostu dobuduje sobie tutaj coś takiego.
A następnie wyekstruduję to w dół.
Wybierając narzędzie Extrude mogę też wywołać je klawiszem X.
Widzimy, że ten subdivision troszeczkę to uśrednia,
więc możemy zrobić coś takiego delikatnie to sobie wyciągnąć i jeszcze
raz wyciągnąć w tym miejscu. Ok.
I jeszcze raz sobie wyciągniemy to, a następnie stworzymy sobie
dodatkowe płaszczyzny wewnątrz ok, w ten sposób i możemy to excudować,
ale tym razem wciągając to do środka.
O coś takiego.
Co nam to dało?
W ten sposób utworzyliśmy sobie właśnie taki element, który pozwoli na to,
żeby zamieścić ten kij Caps na Switchu.
No i teraz będziemy chcieli wymodelować taki switch
i to pewnie będzie bardziej problematyczne, bo jest to troszeczkę
bardziej złożony temat, ale oczywiście da się to zrobić, to nie jest niemożliwe.
Zwłaszcza, że doświadczenie już mamy całkiem spore.
Troszeczkę przyciemnić ten background color, żeby nam się
te modele odcinały od tła.
I teraz to co potrzebuję to jakiś obrazek referencyjny.
Okej, w serwisie Pinterest znalazłem taką wizualizację i może ona nam się przydać.
Nie będę robił aż tak szczegółowego tego switcha, ale poszczególne te elementy,
czyli tą wtyczkę, ten plastik przeźroczysty,
Tą sprężynę i tą podstawę możemy możemy sobie wykonać
z tą wiedzą, którą mamy teraz.
Aktualnie nie powinno to stanowić problemu, więc wracamy do spline.
I możemy zacząć od Cube'a, więc stworzymy sobie kostkę.
Zrobimy ją tutaj.
Następnie przemieścimy ją niżej.
Będę chciał ją powiększyć. Na pewno.
Więc może ustawmy się w ten sposób?
Włączmy sobie przyciąganie do obiektu.
Ok, na pewno sobie to powiększymy w ten sposób, o tak.
Tutaj musimy ustawić tą samą wartość, żeby to było na planie kwadratu.
I jeśli chodzi o wysokość ustawmy w ten sposób.
Czy zaokrąglimy narożniki?
Chyba na razie nie, ponieważ przejdziemy sobie do trybu Edit.
Ok, więc możemy to zrobić sobie teraz Przechodzimy do Smooth and the Dead.
Mamy subdivision od razu włączony.
Narazie go wyłączymy.
Myślę, że zaznaczymy sobie tą górną płaszczyznę i troszeczkę ją zmniejszymy.
Ok, Natomiast tą płaszczyznę podniesiemy wysoko, wysoko gdzieś tak.
No i ok.
Teraz jeżeli dodamy sobie Subdivision Modifier, no to nie do końca to wygląda
tak jak należy, więc proponuję, żebyśmy sobie tutaj stworzyli
w tym miejscu na pewno i przeniesiemy go do góry za pomocą Edge Slide.
Okej.
I tak samo zrobimy tutaj na dole.
W porządku, tutaj na dole możemy sobie zaznaczyć tą płaszczyznę
i wybrać insert face.
Ok, no i jeszcze stwórzmy sobie jedno odcięcie tutaj, przy czym wybierzmy
sobie slajd i przesuńmy to tak.
I jeszcze jeden cud.
I wybierzmy sobie edge slide klawiszem E i przenieśmy to w ten sposób.
Ok.
No i dobra, mamy już bazę pod dalszą pracę.
Teraz stworzę sobie jeszcze jeden Cube.
W tym miejscu bez żadnych narożników troszeczkę go powiększę w ten sposób.
I wykorzystamy sobie tutaj tak zwany boolean modifier, czyli
też coś z czym już pracowaliśmy.
Tylko sobie to wyśrodkujemy i przeniesiemy ten element tutaj niżej.
Po prostu chodzi mi o to teraz, żeby utworzyć otwór wewnątrz tego elementu.
Więc z shiftem zaznaczam sobie oba te elementy, a następnie
przechodzę do button modifier.
Wybieram pierwszą operację i mamy taki oto otwór.
Tak więc mamy już pierwszy element zbudowany,
ale nie do końca, bo jeszcze chciałbym tutaj dorobić jakieś
dodatkowe uchwyty tutaj w tym miejscu.
Więc znowu możemy sobie wybrać na przykład.
Cube, czyli kostkę.
Tę kostkę wrzucimy sobie tu.
Nie chciałbym, żeby ona była w jakiś sposób zaokrąglona.
Przynajmniej nie teraz.
Ok, dorzućmy sobie ją tutaj.
W ten sposób troszeczkę ją rozszerzymy.
Delikatnie możemy zaokrąglić.
Jeszcze troszkę spłaszczamy ją.
I wrzućmy tu.
Fajnie to wygląda.
I teraz wybierzmy sobie może Command D.
Przenieśmy tutaj.
Ok.
I dla obu tych elementów wypadałoby dodać materiał, który jest szkłem.
Na razie bez jakichś bardziej zaawansowanych ustawień.
Zaznaczmy sobie te dwa elementy i wybierzmy sobie glass color.
Po prostu zamieniamy glass.
Dodamy teraz jeszcze jeden element, znowu kostkę.
Tutaj nie chciałbym, żeby ona była w jakiś
sposób zaokrąglona znowu, więc wyłączmy sobie przynajmniej na
razie to zaokrąglenie.
Teraz możemy jeszcze się upewnić, że jest ona wyśrodkowana.
Ok.
I teraz klikam na nią i wybieram Smooth and Edit.
Wyłączam subdivision.
To mi nie jest potrzebne teraz.
Nie, nie w tym momencie.
Możemy sobie zaznaczyć tą płaszczyznę tutaj i np.
Może troszeczkę podnieść ją do góry.
Tą płaszczyznę też sobie zaznaczymy i wybierzemy sobie tutaj.
Może ten.
Kij cap sobie wyłączymy.
Wybierzemy sobie tutaj insert face.
Ok.
Następnie wyekstradujemy sobie to tutaj w dół.
Ok.
Tutaj dodamy sobie taki plusik.
Teraz jak to zrobić?
Możemy sobie wybrać plain.
Ustawiamy ją tutaj, natomiast boki sobie ustawimy po trzy z każdej strony
i wybierzmy Move and edit.
Teraz możemy zaznaczyć sobie tą płaszczyznę, tą tą oraz
tą, a następnie je usunąć. Po prostu.
I teraz to co zrobimy to wyeksplodujemy sobie całość.
Czyli możemy wybrać sobie X through the.
Division modified.
Troszkę zwiększymy, możemy sobie dodać tutaj lub w tym miejscu i przeciągnąć.
Możemy sobie dodać w tym miejscu i przeciągnąć tak.
To samo zróbmy tu dzięki temu.
To samo zróbmy tu.
Dzięki temu uzyskamy tutaj taki fajny narożnik.
Ok.
Ok. I jeszcze tu.
Całość musimy zmniejszyć.
Zaznaczmy sobie jeszcze wszystko.
I myślę, że możemy sobie wybrać tutaj na przykład, że w tym miejscu,
a następnie przenieśmy je niżej.
Może jeszcze troszkę i cały obiekt zatopimy sobie tu i.
Teraz do tego Cube'a.
Byłoby fajnie, gdybyśmy jeszcze coś dodali.
Czyli na przykład możemy tutaj.
Troszkę go zaokrąglić i myślę, że najlepszym do tego
rozwiązaniem będzie oczywiście Lupka, więc wybieram klawisz C.
Przenieśmy sobie to tutaj w ten sposób.
Tu możemy sobie jeszcze dodać.
Kolejne odcięcie.
Możemy wybrać sobie Edge Slide.
Okej, kolejne odcięcie znowu tutaj, w tym miejscu.
I slajd.
Ok, mamy.
To wygląda całkiem fajnie, ale to jeszcze nie wszystko.
Myślę, że byłoby super, gdybyśmy sobie ten obiekt skopiowali i
wybierzmy sobie command de.
Następnie obróćmy go w ten sposób, ok?
I z shiftem troszkę go sobie powiększymy, a następnie przenieśmy go może tak.
I te obiekty myślę, że możemy sobie zgrupować.
Ok.
Kolejna rzecz jaką chciałbym dodać to sprężyna.
Wybierzmy sobie +, a następnie mamy tutaj takie narzędzie, które nazywa się Helix.
Dodajmy sobie je tutaj.
Na razie to jest taka dosyć spora sprężyna, ale na pewno sobie
zmienimy tutaj kilka rzeczy.
Radius to grubość sprężyny, grubość tej linii sprężyny.
Mamy tutaj Revolution, gdzie możemy dodawać więcej takich elementów.
Możemy sobie naszą sprężynę Dowolnie zmniejszyć.
Myślę, że coś takiego sobie zrobimy.
Tutaj też może ustawmy sobie 30.
Następnie puff radius.
Sobie troszeczkę zmniejszymy.
Całą sprężynkę sobie spłaszczymy troszkę.
Okej.
Ona jest jeszcze troszeczkę za duża moim zdaniem.
Ustawmy sobie tutaj. 21 i przenieśmy ją.
Gdzieś tutaj. Ona jeszcze jest za duża.
Spróbujmy może z wartością 16.
Zmniejszmy sobie też radius, ale może do wartości na przykład 2.
Chociaż nie wiem. Chyba 1.
Będzie lepiej.
I następnie wybierzmy sobie wartość Y.
Troszkę ją spłaszczymy.
I zwiększmy sobie może jeszcze Revolution tak, żeby tych zwojów było więcej.
No i ok, mamy kolejny element.
Tą sprężynkę sobie damy tam.
I został nam jeszcze jeden obiekt do zrobienia.
Wybierzmy sobie tutaj Command D.
Skopiujemy sobie to.
Myślę, że możemy sobie to odwrócić o 180 stopni.
To co tutaj zrobimy to może ten Glass?
Na razie zamienimy na kolor.
I mamy tutaj boolean.
Ja myślę, że to sobie usuniemy i zrobimy tutaj zupełnie inną rzecz.
Troszeczkę. Mianowicie.
Mianowicie wybieram tą kostkę Edit Mesh przechodzę do trybu edycji,
zaznaczę sobie tą górną płaszczyznę i wybierzmy sobie insert,
czyli wybieram klawisz A.
Stworzymy sobie tutaj coś takiego.
Następnie możemy sobie to wyekstradować w dół.
Okej.
Co tutaj zrobimy.
Zrobimy mniej więcej coś takiego.
Taki otwór, w którym mogłaby się ta sprężyna schować albo na
które mogłaby się nałożyć.
Czyli znowu wybierzemy sobie tutaj insert face.
Czyli znowu wybieramy insert face, ale wybierzmy może wyłączenie Subdivision
Modifier, tak żebyśmy w ogóle widzieli co się tutaj dzieje.
Ok.
Może coś takiego teraz sobie wyekstradujemy.
Troszkę sobie zmniejszymy tą płaszczyznę.
Okej.
I znowu wybiorę sobie insert po to, żeby dołożyć płaszczyznę taką mniej
więcej i wyekstradujemy ją sobie w dół, czyli do środka.
Ok. Teraz włączmy Subdivision Modifier.
Zobaczmy, co nam tutaj wyszło.
Ten element wygląda bardzo fajnie.
Coś takiego mi chodziło po głowie jeszcze.
Może wybiorę sobie lookout i dołożę sobie odcięcie gdzieś tutaj.
A następnie przeniosę je w dół.
Tak, żeby tutaj uzyskać taki ładny kąt.
Bardzo fajnie.
Teraz jeżeli ja sobie ten element tutaj dorzucę, tak, bo
finalnie będę chciał, żeby ten switch dało się w jakiś sposób zamknąć.
To chyba byłoby fajnie, gdyby te elementy miały tutaj jakieś miejsce,
w które mogą się wsunąć.
Więc może skopiujmy sobie to, ubierzmy komandD.
Przenieśmy do grupy tej.
Jako, że to jest grupa boolean i mamy tutaj już tę operację
ustawioną na substruction.
No to ładnie nam to wycięło tutaj otwór ten Cube.
Możemy nim tutaj manipulować, natomiast troszeczkę ten otwór chyba jest tutaj za
mały, dlatego sam Cube musimy sobie powiększyć na przykład w ten sposób.
No.
I teraz, jeżeli ja może te obiekty sobie zgrupuję.
Command-G I niech to będzie glass plastic.
I teraz, jeżeli ja z tym sobie gdzieś wjadę, no to widzimy,
że ładnie nam się to tutaj.
Zasklepia tak.
Jeszcze możemy sobie ten Cube troszkę zmniejszyć, tak
żeby to było ładnie dopasowane.
Okej.
O.
Coś takiego.
I zduplikujmy sobie teraz ten Cube, który wycina ten otwór.
Czyli to jest to command D i przenosimy to na drugą stronę, czyli tu.
Nazwiemy sobie tą grupę.
Plastic bottom.
Ten element Zobaczmy jak on tutaj się prezentuje.
Spróbujmy troszeczkę, może jednak to powiększyć i nałóżmy to sobie tutaj na to.
Ok, nazwiemy to spring, czyli sprężyna.
Mamy nasz plastik glass, który wchodzi tu ok.
I jeszcze ten element.
Tą grupę Na przykład możemy to nazwać
caps join albo joyner, czyli łącznik.
I nałożyć to na sprężynę, czyli schować do środka.
Może to powiększymy troszkę.
Teraz jeśli chodzi o to szkło, tutaj mamy nasze szkiełko.
Może zmniejszymy troszeczkę sobie blur sickness?
Może ustawmy coś takiego i reflection?
Może w ten sposób.
Ok, to ogólnie rzecz biorąc będzie raczej taki plastikowy element.
Może to niech będzie, powiedzmy pomarańczowe.
A to może niech będzie.
Brązowe.
I sprężyna.
Czyli spring sprężyna.
Może niech ma ten szary kolor, Ale fajnie by było, gdybyśmy dorzucili
sobie jeszcze jakiś. Matka taki błyszczący.
Więc rozwijam listę. Matka.
Wybieram sobie tutaj jeden z tych wbudowanych obrazów.
Na przykład ten.
I teraz ta sprężyna będzie się fajnie tutaj błyszczeć.
Ok. Co tu jeszcze mamy?
Włączmy sobie nasz white key.
Który możemy sobie tutaj nałożyć?
Ja myślę, że chyba byłoby lepiej, gdybyśmy sobie po prostu powiększyli ten element.
Może na przykład tą kostkę, ten Cube.
Powiększymy ten Cube z shiftem.
Spróbujmy sobie jeszcze to troszeczkę powiększyć.
O.
I teraz ten kijka powinien nam się ładnie tutaj schować.
O właśnie.
W porządku, zbudowaliśmy sobie coś takiego.
I teraz możemy zrobić bardzo fajną rzecz.
Mamy tutaj raz, dwa, trzy, Cztery grupy.
Do każdego z tych elementów dodamy sobie stan.
Base state oraz state.
I tutaj niech to troszeczkę wyjedzie.
Ok.
Następnie zaznaczymy sobie tą grupę, dodamy sobie stan base state oraz state.
To też nam sobie niech wyjedzie.
Tutaj zaznaczymy teraz ten element też dodamy tutaj Stany.
I w tym drugim stanie niech nam to zjedzie tu niżej.
Ok.
Naszą sprężynę też sobie zaznaczymy.
Też dodamy tutaj stan.
I tutaj niech ona sobie wyjedzie, tak.
I ten element też dodamy sobie tutaj state dodatkowy i to wyjedziemy
z tym w ten sposób.
I teraz możemy sobie dodać zdarzenie.
I akcję klikniemy sobie w grupie.
Komandg.
Nasza grupa będzie miała event.
Będzie to event oparty o Mouse Hover i będzie to tranzycja.
Ta tranzycja będzie dotyczyła np.
Najpierw może White Key i będzie to from base state two state.
Okej, i teraz jeżeli ja sobie tutaj najadę, no to widzimy, że ten
klawisz nam ucieka bardzo dobrze.
Teraz dodamy sobie jeszcze jedną tranzycję i ta druga tranzycja
będzie dotyczyła Caps.
Joyner też from Base State State.
Okej, fajnie to wyjeżdża.
Następnie zaznaczmy sobie jeszcze raz naszą grupę do eventu Mousehover.
Jeszcze dodamy jedną akcję, kolejne transition i będzie to tym razem.
Glass plastic from base State State.
Ok.
Następnie mamy jeszcze ten element.
Tak, ten czerwony i sprężynę.
Czyli dodamy sobie kolejną tranzycję.
Żeby było nam łatwiej, to tę tranzycję, którą tutaj mamy, sobie pozwijamy.
Jeszcze jedna tranzycja, która dotyczy, która dotyczy teraz
Plastic Bottom Fromstate State.
Okej, i jeszcze piąta tranzycja, która będzie tym razem dotyczyć sprężyny
Springs from base State to state.
Zwróćmy uwagę, że dodaliśmy ten event nie do poszczególnych grup, które mają
przypisane stany, tylko do całej tej grupy.
Dlaczego tak?
Dlatego, że jeżeli przypisałbym do każdej z tych poszczególnych grup, która ma swoje
stany, osobne eventy, które działają mouse Hover to jeżeli
najechałbym kursorem tylko na kick caps to tylko i wyłącznie kick
Caps by się podniósł, a reszta elementów zostałaby na swoim miejscu.
A mi chodzi o taki efekt.
Bardzo fajnie.
Ok, a teraz to wszystko w tej lekcji.
Dzięki serdeczne za uwagę.
Słyszymy się w lekcji następnej.