Spline 3D: Tryb edycji w praktyce
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.
Znowu tworzymy sobie Cube podstawową kostkę przytrzymuję lewy klawisz myszy,
przeciągam jeszcze dodatkowo wrzucę sobie shift.
Ok.
Nie chcę tutaj żadnych zaokrąglonych narożników.
Od razu przechodzę do Smooth do Smooth i mam włączony już subdivision.
To co chciałbym zrobić to zrobić wykonać taki model wesołej rybki.
I jak mogę to zrobić?
Zaznaczmy sobie tą płaszczyznę, a następnie z shiftem troszeczkę sobie ją
zmniejszę i wyciągnę tutaj w ten sposób.
Następnie wybiorę sobie narzędzie Lookout, kliknę tutaj w tym miejscu i
w ten sposób troszeczkę sobie shiftem wyciągnę te krawędzie.
Tak.
No i zobaczmy teraz, jeżeli wyłączę sobie modyfikator Subdivision, no to mamy taki
kanciasty obiekt, ale jak sobie go włączę, no to mam już takie fajne body, które mogę
sobie wykorzystać do modelowania mojej ryby.
Dodatkowo możemy na przykład zaznaczyć sobie tą płaszczyznę, a następnie
wybrać sobie tutaj insert.
Ok.
I teraz ja troszeczkę sobie to zmodyfikuję.
A następnie mogę sobie wybrać Extrude również spod klawisza X.
Mogę wywołać sobie to narzędzie i w ten sposób stworzę sobie taką buzię tej ryby.
To jest teraz słabo widoczne, ale jeżeli na przykład zmienimy sobie kolor
i oświetlenie, no to widzimy, że mamy tutaj taki wklęsły Obiekt ok.
Zaznaczę sobie teraz z Shiftem te krawędzie.
Spróbuję je troszeczkę sobie tutaj wyciągnąć.
Mogę je zmniejszyć.
I wyciągnijmy je jeszcze troszkę.
Ok. Zaczyna wyglądać bardzo fajnie.
Klikam dwukrotnie, aby wyjść z trybu edycji.
Chciałbym też dodać jakiś oczy naszej rybce, ale chciałbym, żeby te oczy były
w jakichś fajnych goglach.
Więc może wybierzemy sobie tutaj narzędzie z Sfera, czyli sfera.
Mamy tutaj jedną sferę.
Tą sferę na razie umieścimy sobie gdzieś.
Tutaj chciałbym, żeby ona była na pewno większa, więc z shiftem
mogę sobie ją powiększyć. Okej.
Stworzymy sobie kopię command.
de i mamy już dwie takie sfery.
Przeciągniemy je w ten sposób.
Może niech będą bliżej siebie. Troszeczkę.
Zaznaczmy je i zatopimy je troszeczkę tutaj w ten sposób.
Na przykład to, co teraz zrobię, to wybiorę ikonkę
plusa i skorzystam teraz z obiektu predefiniowanego, jakim jest cylinder.
Stworzę sobie cylinder w tym miejscu możemy go troszeczkę powiększyć.
Okej, w tym momencie jest on troszeczkę za bardzo zaokrąglony,
więc zmniejszymy sobie ten stopień zaokrąglenia Możemy sobie tutaj
wzdłuż osi Y troszeczkę to spłaszczyć. Na przykład tak.
I to, co mnie interesuje jeszcze to hollow, czyli otwór w środku.
O, na przykład coś takiego.
I teraz taki otwór możemy sobie dorzucić tutaj.
Będzie nam to pełniło rolę jakiegoś tutaj okularu dla tej ryby.
No i ok.
Popracujmy sobie jeszcze nad kształtem tego obiektu.
Możemy kliknąć na niego dwukrotnie i też pozwoli nam to przejść do trybu
do trybu edycji.
Wybiorę sobie narzędzie lub kat i myślę, że byłoby fajnie, gdybyśmy stworzyli
sobie jeszcze odcięcie w tym miejscu.
Możemy je sobie powiększyć z Shiftem. Naturalnie.
Na przykład tak.
Na razie się nie przejmuję tym, że gdzieś tam zatapia mi to oczy.
Nie jest to jakiś większy problem w tym momencie.
Nawet daje nam to fajny efekt. Trzeba przyznać.
Taki bardziej rybia Sty.
Okej.
No i teraz chciałbym jeszcze zająć się tutaj ustami tej ryby.
Mianowicie przejdźmy może do widoku z przodu.
Przejdziemy do zaznaczania rzeczy do zaznaczenia w RTX ów tak naprawdę i
spróbujemy tutaj stworzyć jakiś uśmiech tej naszej rybie.
I jeszcze zaznaczę sobie te dwa RTX i wyciągnę je
bardziej do przodu w ten sposób.
Ok.
Zaznaczam teraz sfery oraz cylinder.
One są niewidoczne, bo troszeczkę nam zostały zatopione w tym obiekcie, więc
mogę z Shiftem zaznaczyć je tutaj w panelu z obiektami i mogę na przykład
troszeczkę sobie z tym wyjechać.
Znowu ok.
No i widzimy już nasze elementy z powrotem.
Wyciągnijmy sobie jeszcze sfery.
Okej?
Ten obiekt troszeczkę sobie obrócimy w ten sposób może.
O, chyba będzie fajniej, moim zdaniem.
Wybierzmy Command D.
Kopię tutaj obrócimy po osi Z na minus 114 stopni ok.
I w ten sposób mamy kopię.
Zwróćmy uwagę klikając dwukrotnie na nasz obiekt, że jeżeli ja wyłączę sobie
subdivision, no to mamy coś takiego. Tak?
Nie jest to dokładnie to, co potrzebujemy, ale jeżeli będziemy zwiększać ten
parametr, no to wtedy otrzymujemy bardzo fajny obiekt.
Możemy sobie zaznaczyć na przykład te dwie krawędzie, troszeczkę je wyciągnąć.
I możemy sobie jeszcze dodać kat tutaj wewnątrz.
Albo ewentualnie wyciągnąć te krawędzie dodane przez kat na wierzch i wtedy już
mamy fajniejszą buzię zrobioną tutaj tej rybce.
Fajna rzecz, jeżeli włączymy sobie po odznaczeniu obiektów ambient Shadow.
No to teraz te obiekty rzucają światło jeden na drugi.
Tak, rzucają cień.
Tak naprawdę więc jest to efekt, z którego warto korzystać.
Przypominam ambient Shadow.
Ale oświetleniem jeszcze będziemy się tutaj naturalnie zajmować.
Stwórzmy sobie jeszcze kolejne obiekty.
Myślę, że możemy wybrać sobie znowu Cube.
Stworzymy sobie kostkę tutaj.
Jeśli chodzi o tą kostkę to.
Zmodyfikujemy ją sobie.
Nie chcemy tutaj żadnego zaokrąglenia.
Delikatnie sobie ją spłaszczymy w ten sposób.
Ok, zrobimy sobie teraz po prostu płetwę i to co ja chciałbym teraz zrobić.
No to naturalnie przejdziemy do Smooth.
Edit Możemy sobie tutaj zwiększyć poziom tego efektu Subdivision.
Jeśli chodzi o naszą płetwę, to przejdziemy w tryb zaznaczenia
płaszczyzny, czyli wybieram F.
Tutaj tę płaszczyznę sobie powiększymy w ten sposób i możemy uzyskać
bardzo fajną płetwę. Tak wybierzmy.
I jeszcze dodajemy sobie tutaj takie odcięcie, żeby nasza
płetwa była trochę grubsza.
Mamy już płetwę do naszej ryby.
Chciałbym tą płetwę usunąć tutaj, więc możemy to oczywiście zrobić.
Możemy przełączyć się na widok z góry Command minus.
Możemy się oddalić, zwiększyć może ten efekt subdivision do trzech, żeby nie była
aż tak bardzo kanciasta ta płetwa okej.
No i dobra, mamy naszą płetwę.
Wybierzmy sobie Command D Możemy ją przesunąć tutaj.
Możemy ją sobie obrócić o 180 stopni.
Wpiszmy tutaj 0 i dosuniemy sobie tutaj.
Okej, wygląda fajnie.
A co z tylną płetwą?
Zrobimy podobny ruch, wybierzemy, znowu sobie cube ustawimy.
Dodamy sobie kostkę w tym miejscu przełączmy się teraz
tutaj na widok z tyłu.
I to co fajne jest tutaj przy układaniu obiektów to tak
zwany snapping, czyli przyciąganie.
Wybierzemy sobie snap to object.
I teraz jeżeli ja sobie ustawię tą kostkę tutaj, to widzimy, że ona
idealnie wyśrodkowuje się z naszym fioletowym body te ryby.
W ten sposób widzimy, że tutaj wyświetla się taka czerwona linia I znowu nie
chcemy tutaj żadnego zaokrąglenia.
Zaokrągleniem zajmiemy się sami, budując sobie ten efekt Subdivision.
Okej, troszeczkę sobie spłaszczymy.
To na przykład tak wyciągnijmy sobie to tutaj i wybieram Smooth and Edit ponownie.
I teraz to tutaj zrobimy.
Zwiększmy tutaj ten subdivision troszeczkę bardziej.
Następnie myślę, że możemy sobie tutaj.
Dodać lub cut, czyli takie odcięcie z płaszczyznami dookoła w ten sposób.
I co teraz zrobimy?
Myślę, że byłoby fajnie, gdybyśmy zaznaczyli sobie na przykład
z Shiftem te dwie płaszczyzny.
Możemy je sobie powiększyć.
Wyciągnijmy je sobie tutaj dosyć mocno.
Okej, jeszcze sobie powiększymy i na przykład wybiorę sobie teraz
zaznaczanie krawędzi i tą krawędź schowam sobie bardziej tutaj w ten sposób.
Na przykład tak.
A tą krawędź możemy sobie wypchnąć tu.
I w ten sposób mamy fajnie zrobiony ogonek naszej ryby.
Myślę, że dobrze by było, gdybyśmy sobie to powiększyli, bo to
jest troszeczkę za małe.
Ustawmy sobie w ten sposób i może troszeczkę sobie spłaszczmy znowu.
Wybierzmy sobie edit Mesh.
Wygląda całkiem fajnie.
Ewentualnie możemy sobie jeszcze wybrać i dodać dodatkowe krawędzie
dookoła naszego obiektu.
Ok, pierwsze koty za płoty.
Mamy już fajnie stworzony obiekt.
No i teraz to wszystko.
Przechodzimy do lekcji następnej.