Spline 3D: Dostęp do poszczególnych obiektów 3D w Webflow
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.
Ok.
No to rozpoczynamy teraz pracę nad animacją naszego przycisku w oparciu o
scroll, czyli mniej więcej trochę tak, jak to się dzieje na stronach
produktowych u Apple'a.
Myślę, że to, co powinniśmy zrobić najpierw, to
usunąć wszystkie interakcje, jakie mamy zaprojektowane w tym przycisku.
To znaczy nie chciałbym, żeby on rozjeżdżał się po
najechaniu na niego, czyli przy evencie Hover Event Hover musimy po prostu usunąć.
To rozjeżdżanie się elementów zaprojektujemy bezpośrednio
tutaj, w Webflow.
Dlatego ja teraz przejdę do spline i tutaj zmienimy kilka rzeczy.
Mianowicie będę chciał po prostu, żebyśmy zaznaczyli sobie wszystkie te
elementy, które mają jakieś interakcje.
I te interakcje usuniemy.
Mamy tutaj naszą grupę.
Ona ma mouse hover, do tego Mouse Hoovera są przypisane wszystkie tranzycję naszych
obiektów, więc po prostu ten mousehover sobie usunę.
Mogę tutaj też usunąć sobie te stany, bo w zasadzie nie będą nam potrzebne.
W każdym z tych obiektów czy obiektów usuniemy ten dodatkowy stan.
Zostawimy sobie tylko basestate.
Ok. I jeszcze tu.
No i w porządku. No i co teraz robimy?
Teraz klikamy na export, a następnie wybieram update.
Mamy informację o tym, że URL został zaktualizowany.
Możemy wrócić teraz do przeglądarki Chrome.
I tutaj teraz po prostu kliknę sobie na trybik w tym komponencie splinowym
i wybieram Reload Explain Scan.
Ok. No i strona została zaktualizowana.
I teraz jeśli wybiorę sobie podgląd i najadę sobie tutaj myszą na nasz przycisk
nic się nie dzieje, więc teraz dodamy sobie tak zwany element trigger.
Zaznaczam całą tą sekcję i wybieram tutaj po prawej stronie.
I tutaj przechodząc ze stylu na interakcje wybieram plusa.
Pierwszy element trigger.
Będzie to while scrolling in view.
Wybieram Action select and Action i wybierzmy sobie play scroll animation.
Wybieram ikonkę plusa.
Przy Scroll Animation mamy nową animację.
Nazwiemy ją sobie Spin.
Scroll.
Ok.
Następnie zaznaczam sobie nasz komponent splinowy i wybieram tutaj ikonkę plusa,
a następnie przy integrations zaznaczam spline.
I co tutaj mamy?
Mamy taką oś czasu od zera do 100% i jeżeli ja tutaj przejdę niżej.
To możemy sobie w tej sekcji spline rozwinąć listę i mamy
dostęp do wszystkich obiektów i grup obiektów na scenie.
Jest to w ogóle super rewelacyjne współdziałanie z Line oraz Webflow,
ponieważ daje nam dużo większe możliwości jeśli chodzi o projektowanie interakcji.
Dzięki temu, że mamy dostęp do wszystkich tych elementów, możemy sobie dodawać
animacje bezpośrednio do każdego z tych elementów, co jest naprawdę
potężnym narzędziem.
I zaczniemy może od samego kijka.
Takiego kijka, czyli Whitekey.
Tutaj przyy, tutaj wybiorę sobie jakąś wartość np.
Ustawmy ten klawisz w tym miejscu, a następnie klikam tu na tą końcową
pozycję i znowu wybieram obiekt.
To będzie white key.
I teraz tutaj, przy osi Y, podniesiemy go mocno.
Na przykład tutaj.
I teraz wybieram save.
I zobaczmy, co się dzieje, jeśli ja przejdę do podglądu.
Widzimy, że kiedy scrolluje nasz klawisz, nasz key caps się podnosi.
Dokładnie o to nam chodziło.
No i mamy naszą animację SprintScroll.
W każdej chwili możemy tutaj do niej wrócić.
No i teraz jeśli chcemy dodać taką interakcję do kolejnego elementu, to po
prostu musimy sobie dodać nową animację przy tej pozycji.
0%.
Tą pozycję 0% możemy w każdej chwili zmienić.
Wystarczy, że sobie przesuniemy na przykład tutaj i mamy przy
23% scrollowania już tutaj.
Dopiero wtedy ten przycisk zacznie się odrywać od reszty.
Więc wybierzmy sobie sejf i zobaczmy jak to wygląda teraz.
O, teraz widzimy ten przycisk w całości, ale kiedy jeszcze bardziej zaczniemy
scrollować, no to on już się wtedy odrywa.
Dokładnie o coś takiego mi chodziło.
Więc tak klikam na naszą animację split scroll.
Tutaj klikam ikonkę plusa, a następnie muszę wybrać tutaj
nasz komponent Split, czyli przechodzę tutaj do Navigatora.
Klikam Split Component, wybieram ikonkę plusa i teraz mogę.
Zaznaczam sobie split component, klikam na ikonkę plusa i mogę wybrać split
i tym razem będzie to dotyczyło innej grupy obiektów, a mianowicie
będzie to Plastic bottom.
I tutaj też wybieram ikonkę plusa i też wybieram spline i też
będziemy pracować z Plastic Bottom.
Natomiast tutaj chciałbym, żeby ten plastik bottom był na
przykład gdzieś w tym miejscu.
Okej, może wpiszmy tutaj, wpiszmy minus 36.
Ok, to będzie jego początkowa pozycja.
Natomiast tutaj chciałbym, żeby ten obiekt mocno przejechał tutaj niżej.
Tak więc wybieram save, klikam podgląd.
O i dokładnie tak to się nam powinno rozjeżdżać.
Bardzo fajnie to wygląda.
Oczywiście została nam jeszcze sprężyna i te elementy wewnątrz, ale to
zrobimy chyba po przerwie.
Teraz możemy sobie pozwolić na łyk kawy i słyszymy się za chwilę.