Spline 3D: Interakcje dla grup obiektów
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.
Tym razem chciałbym dodać do naszej ryby kolejne interakcje.
No i tym razem będę chciał w zasadzie dodać te interakcje do całej naszej ryby,
nie do pojedynczych obiektów, ponieważ to już zrobiłem.
Mamy ruchome płetwy, oczy i tak dalej.
I teraz chciałbym, żeby cała nasza ryba jako jedna grupa obiektów
zaczęła się ruszać.
Dlatego ja proponuję.
Dlatego ja proponuję, żebyśmy zaznaczyli wszystkie te elementy,
które naszą rybę tworzą.
Wybieram Command g lub Ctrl g i mamy już grupę.
Ewentualnie możemy też wybrać prawy klawisz myszy i wybrać Group Selection.
Teraz nazwiemy sobie tą grupę na przykład Fish i.
Dodamy tutaj pierwszą, pierwszą interakcję.
Chciałbym, żeby nasza ryba w całości podążała za kursorem, żeby
robiła to niezależnie od oczu. Tak?
Czyli możemy sobie dodać event bez dodawania stanów.
Wybieram event i będzie to look at, a następnie wybierzemy
jako target Targetcursor plain distance ustawimy na przykład na 700
i dalej wybierzemy Noreset.
Możemy zwiększyć prędkość i Direction ustawimy na X.
Teraz podejrzewam, że nasza ryba będzie do nas tyłem.
O właśnie.
Dlatego tutaj dobrym rozwiązaniem jest odwrócenie pivot pointa,
czyli tak zwanego ancora.
To już robiliśmy z klawiszem Alt.
Wystarczy, że wciśniemy zaznaczymy naszą grupę z
wciśniętym klawiszem Alt i teraz możemy odwracać Anchor point, Ale tutaj
dzieje się coś dziwnego w tym momencie.
Do tego anchor pointa są przypięte wszystkie nasze elementy anchor pointa
całej grupy, więc proponuję, żebyśmy zrobili to inaczej.
Po prostu zaznaczymy sobie naszą grupę, a następnie znowu ją zgrupujemy wybierając
Command-G i zamykamy grupę w grupie.
Możemy tutaj napisać All Objects.
I teraz do tej grupy dodamy sobie nasz event Look at.
Tutaj musimy go usunąć, bo nie jest nam potrzebny.
Dodajemy go tutaj.
Dodajemy go tutaj do całej tej grupy.
No i wybieramy event.
Będzie to oczywiście look at.
X I tutaj dopiero dla tej grupy odwrócę sobie anchor point.
Wybieram alt, klikam na grupę i tutaj robimy to z wciśniętym klawiszem
Shift i odwracamy o 180 stopni.
I teraz ryba będzie do nas przodem.
Jeśli oprzemy to o kierunek oparty o oś x plane distance ustawmy na 700 no reset.
Możemy zwiększyć prędkość na przykład i wybierzmy teraz play.
No i wygląda na to, że nasza ryba fajnie tutaj spogląda za kursorem.
To co chciałbym jeszcze zrobić to może zwiększyć zwiększyć plane distance dla
oczu, tak żeby one jakby bardziej niezależnie ruszały się.
Albo ewentualnie tutaj możemy wpisać sobie tysiąc jednak
i może zmniejszymy sobie tą prędkość.
O i teraz wygląda to fajniej.
Zaznaczmy sobie jeszcze oczy.
Tutaj wpiszemy sobie plane distance na przykład 300 i zwiększmy
prędkość do siedmiu.
To samo z drugim okiem.
Tutaj wpiszemy sobie 300 i zwiększamy prędkość do siedmiu.
I zobaczmy teraz o.
Teraz moim zdaniem wygląda to znacznie lepiej.
No i w porządku.
Dodamy sobie teraz jeszcze jedną taką animację.
Chciałbym, żeby ta ryba też cały czas się poruszała.
Ona oczywiście jakby podąża za naszym kursorem, ale w momencie kiedy ja
zatrzymuję kursor, to ryba się nie rusza.
Tak ruszają się tylko jej płetwy, ale też chciałbym, żeby w całości się ruszała.
Dlatego korzystając z okazji, że mamy tutaj dwie grupy grupę Fish i All Objects,
to dodamy kolejną animację tudzież interakcję do tej grupy.
Fish możemy zrobić tak.
Dodamy sobie tutaj dwa stany stan bazowy, gdzie nasza rybka będzie odwrócona troszkę
w ten sposób i stan dodatkowy, gdzie nasza rybka będzie odwrócona troszkę w
ten sposób i mamy 2 takie stany.
Chciałbym, żeby płynnie pomiędzy tymi stanami nasza rybka się poruszała.
Dlatego dodamy sobie nowy event event rozpoczynający się od razu
przy starcie naszej animacji.
Będzie to tranzycja, czyli przejście z jednego stanu do drugiego,
czyli FrombaseState State.
Niech to trwa na przykład dwie sekundy.
Zapętlimy to w nieskończoność i cykl oprzemy o animację ping pong, czyli
będzie to płynnie przechodzić z state state i potem state do
state i tak w kółko.
No i zobaczmy.
Ok, fajnie, nasza rybka się porusza, śledzi nasz kursor i jednocześnie też
delikatnie porusza się w lewo i w prawo.
Bardzo fajnie.
Super! O coś takiego mi chodziło.
Dokładnie tak to powinno wyglądać.
To co jeszcze może zrobimy to odznaczamy wszystko i zmieńmy kolor
backgroundu na jakiś jaśniejszy.
Może coś w ten sposób.
Ok, wygląda i pracuje. To bardzo fajnie.
Super.
No teraz to wszystko.
W tej lekcji udało nam się dodać bardzo fajne efekty, fajną animacje i interakcje.
A teraz to wszystko.
Do usłyszenia po przerwie.