Spline 3D: Tworzenie komponentów i instancji
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.
Tym razem porozmawiamy o tak zwanych komponentach i instancjach.
Ale zanim przejdziemy do tego tematu, to zwróć uwagę, że tutaj ten plan z literką W
jako bitmapą rzuca jakiś dziwny kwadratowy cień na nasz kij Caps.
Jeżeli zaznaczymy sobie tutaj odpowiedni element, ja już te elementy
nazwałem w przerwie Shape.
To jest ten biały element image, to jest ta płaszczyzna z bit mapą.
Jeżeli zaznaczymy sobie ten element i przejdziemy do material, a następnie
wyłączymy mu reakcję na oświetlenie, no to widzimy, że teraz już to ładnie znika.
Dokładnie o to chodziło.
Teraz całą tą grupę Quick Caps sobie ponownie zgrupujemy.
Wybierając Command g zamykamy ją w grupie.
I tę grupę nazwiemy sobie na przykład White Key, czyli biały klawisz.
Chciałbym z tej grupy stworzyć komponent.
Komponenty bardzo ułatwią nam sprawę.
Jeżeli ja teraz wybiorę sobie prawy klawisz myszy, a następnie
wybiorę Create components.
Co możemy zrobić za pomocą skrótu klawiaturowego Command
Shift K lub Ctrl+Shift-K?
Jeśli pracujesz na platformie Windows, to zostanie ten element oznaczony właśnie
jako taki komponent w formie ikonki czterech takich kwadracików.
No i teraz co daje nam taki komponent?
On zachowuje wszystkie swoje właściwości, które zaprojektowaliśmy, czyli wszystkie
zdarzenia interakcji i tak dalej.
Natomiast jeżeli sobie taki komponent zduplikujemy wybierając command de, to
tworzymy sobie tak zwaną instancję tego komponentu i widzimy, że jest ona
oznaczona takimi dwoma kwadracikami.
Jeżeli przejdziemy sobie do Assets, to mamy tutaj nasz komponent w
liście assetów.
Mamy tutaj White key.
Wróćmy do Objects i tutaj mamy nasz komponent i instancję.
Jeżeli cokolwiek zmienimy w naszym komponencie, zostanie to automatycznie
przeniesione na instancję.
Jeżeli zmienimy cokolwiek w interakcji czy cokolwiek w geometrii
naszego obiektu, czy cokolwiek w jego materiałach, zostanie to automatycznie
przeniesione na wszystkie instancje, jakie znajdują się w naszym dokumencie.
Czyli przykładowo, jeżeli zaznaczymy sobie na przykład HP i zmienimy mu kolor,
powiedzmy czerwony, no to widzimy, że automatycznie instancja
również uzyskała taki kolor.
Wybierzmy może Commandset.
Jeżeli na przykład kliknę tutaj dwukrotnie i zmienię coś w geometrii naszego
obiektu, to również zostanie to.
Odzwierciedlone w instancji.
Czyli teraz nasze klawisze wyglądają w ten sposób.
Wybierzmy Commands.
Jeżeli natomiast wprowadzę jakąś zmianę w instancji, to zostanie ona wprowadzona
tylko lokalnie w tą instancję i nie będzie miała żadnego odzwierciedlenia
w oryginalnym komponencie.
Czyli na przykład jeżeli ja tutaj przejdę do materiałów.
I zmienię kolor na czerwony, to zostało to zmienione tylko i wyłącznie w tej
instancji, a nie w oryginalnym komponencie.
Jeżeli ja tutaj na przykład zaznaczę sobie ten image i tą grafikę wymienię na jakąś
inną, wybierając ikonkę plusa i załaduję sobie tutaj inny
obrazek, to zostanie to wrzucone tylko do tej instancji.
A nie do komponentu głównego.
Jeżeli wybiorę sobie teraz Play, możemy zauważyć, że zarówno component jak i
instancja mają dokładnie te same interakcje.
Działa to bardzo fajnie i warto wykorzystać profity, jakie
daje nam praca z komponentami.
Ja teraz tą instancję sobie usunę i może stworzymy sobie kilka takich
właśnie instancji W oparciu o nasz obiekt wybierzmy sobie Command i
dodajmy sobie go tutaj.
Możemy sobie tutaj teraz włączyć na przykład Snap to Objects.
Tak, żebyśmy mogli zduplikować te obiekty.
I żeby nam się gdzieś tutaj nie przesuwały na boki.
Chciałbym, żeby nasza klawiatura była dosyć mała, więc myślę, że byłoby fajnie,
gdybyśmy sobie tutaj dodali kilka tych klawiszy.
Nie za dużo.
Teraz możemy sobie wszystkie te instancje zaznaczyć Command D.
Znowu przeniesiemy sobie je tutaj np.
Delikatnie możemy je dać w drugą stronę.
No i teraz udało nam się stworzyć coś takiego.
Wybierzmy sobie teraz play.
Widzimy, że wszystko tutaj pięknie działa.
Bardzo ładnie to wygląda.
Teraz na przykład możemy sobie zaznaczyć te instancje.
Teraz na przykład możemy sobie zaznaczyć te instancje i
wybrać tutaj prawy klawisz myszy, a następnie wybierzmy DetatchInstance,
czyli odłącz instancje od komponentu.
Teraz już nie jest to instancja, a zwykły, po prostu zwykły obiekt.
Widzimy teraz, że mamy tutaj jeden komponent.
Tutaj kilka instancji i zwykłą grupę obiektów.
Co zrobimy z tą grupą obiektów?
Mianowicie przejdę do niej, kliknę sobie na Keyshape i tutaj
zrobimy coś takiego, że wyciągniemy sobie.
Te wertexy.
Okej, w porządku.
I zmienimy tutaj kolor tego przycisku na powiedzmy czarny.
W porządku.
Dalej podmienimy sobie tą bitmapkę.
Wybierzmy sobie na przykład.
Return.
Ok i stworzymy sobie z tego właśnie komponent.
Prawy klawisz myszy Create components.
Tworzymy instancję tego komponentu Command D.
Ok, tą instancję sobie usuniemy, a tą czarną przeniesiemy sobie np tu.
Ok.
I dla tej instancji podmieniamy sobie bitmapkę.
Wybieramy image.
Ładuje obrazek i niech to będzie np. Escape.
I wygląda to teraz tak.
Wydaje mi się, że będzie lepiej, jeżeli te klawisze znajdą się jednak tutaj u góry
Zobaczmy teraz jak to działa.
Tutaj wszystko jest ok.
Ale widzimy, że te czarne klawisze nie chcą się ruszać.
Dlatego, że w momencie kiedy z instancji tworzymy
obiekt podstawowy czy grupę obiektów podstawowych,
to wszystkie te interakcje, jakie są dodane tutaj, dzieją się względem tego
pierwotnego naszego obiektu, czyli tego pierwotnego komponentu.
Więc teraz wystarczy, że tutaj przejdziemy sobie do tego czarnego komponentu.
Przejdziemy tutaj do grupy Caps, przejdziemy do Events MouseHover.
Zobaczmy, czy tu jest wszystko w porządku.
Naszym targetem powinien być.
Kij Caps, który jest tu.
I to jest hover.
Więc przechodzimy do stanu hover i teraz Mousedown
tutaj powinien być naszym targetem.
Kij Caps Dokładnie ten.
I zobaczmy teraz.
Wszystko działa jak należy.
Żeby lepiej zrozumieć o co chodzi z tym targetem, to ten kij caps sobie zmienimy.
Napiszemy go. Nazwiemy go Bikki Caps.
I teraz, jeżeli ja przejdę tutaj do Mousedown na przykład.
To widzimy, że naszym targetem powinien być właśnie ten kij Caps, ta
grupa w dokładnie tym komponencie.
I teraz już działa.
Mamy bardzo ładny efekt hover.
I bardzo ładne kliknięcie.
Zanim przejdziemy dalej, warto jeszcze tutaj zwrócić uwagę na jedną
rzecz, mianowicie na porządek.
Chciałbym, żebyśmy odpowiednio nazwali nasze komponenty i ich instancje.
Jeżeli przejdziemy do Assets, to mamy na liście Components dwa komponenty White
key, czyli ten komponent, który tworzy nam te białe klawisze oraz White
key instance4, czyli komponent czarny, który tworzy nam te czarne klawisze.
Może ten po prostu sobie jakoś nazwiemy i niech to będzie Black.
Key.
I teraz jeżeli przejdziemy do Objects.
To dobrze by było, żebyśmy tutaj usunęli sobie może te instancje
i żebyśmy mieli nowe instancje o odpowiedniej nazwie, czyli Black instance.
W ten sposób i tutaj Command D.
W ten sposób.
Ok. No i teraz ma to większy sens.
Widzimy tutaj większy porządek, czyli mamy black key jako komponent i
dwie instancje Black instance.
Mamy też White key, czyli nasz komponent i wszystkie jego instancji.
No i teraz jest tutaj porządek.
Łatwo się odnaleźć tutaj w tym panelu z obiektami.
Ok.
Chciałbym, żebyś zwrócił uwagę jeszcze na jedną ostatnią rzecz w tej lekcji,
którą w zasadzie już robiliśmy, ale dla utrwalenia powtórzę to
spójrz, mamy tutaj instancję White Key, czyli instancję tego komponentu.
Zrobimy sobie kopię i zrobimy sobie tutaj space Bar, Tak, czyli wybieram command.
de i kopiujemy sobie tą instancję.
No i teraz, żeby móc modyfikować jej
geometrię muszę ją odłączyć od komponentu.
Czyli wybieram prawy klawisz myszy, a następnie Detatchinstance.
No i teraz mogę wejść sobie w tą grupę np.
Tą grupę nazwiemy sobie Space Bar Group.
To co jest w środku?
Key Caps Nazwiemy sobie to Key Space.
Ok.
Myślę, że tutaj ta literka wu nie będzie potrzebna.
Na spacerach zazwyczaj nie ma żadnych oznaczeń.
Zaznaczymy sobie sam ten keys shape i przejdziemy do Edit Mesh.
Tutaj po prostu sobie to rozciągniemy zaznaczając vertex y.
Tutaj przenieśmy to w ten sposób, ok?
I jeszcze te środkowe też dajmy tu mniej więcej na środek.
W porządku.
Dzięki temu, że była to wcześniej instancja komponentu, a teraz ją
rozłączyłem z komponentem, to ma ona zachowane wszystkie interakcje, ale
będzie to wyglądać w ten sposób.
Widzisz, jeżeli klikam albo najeżdżam kursorem na ten klawisz spacji, to
wszystko działa, ale na głównym komponencie.
Dlatego musimy przestawić target.
Zaznaczam nasz naszą grupę Spacebar Group.
Wchodzimy tutaj do jej wnętrza.
Mamy tutaj grupę Keyspace i tu są wszystkie te nasze
stany i eventy Mouse hover.
Tutaj target zaznaczamy Keyspace czyli naszą spację tą grupę.
tutaj przesuniemy na hover Mousedown.
Tutaj też przechodzimy do tranzycji i naszym targetem nie kij caps
a keyspace czyli nasza spacja.
No i teraz odpowiednio to działa dokładnie tak jak powinno.
W porządku, klawisze są gotowe z tej spacji nie będziemy robić komponentu, bo
nie będziemy jej powielać w żaden sposób.
Możemy sobie teraz przejść do następnej lekcji, w której chciałbym, żebyśmy
powrzucali tutaj odpowiednie oznaczenia na klawiszach.
Ja wcześniej w Illustratorze przygotowałem sobie takie pliki PNG z literkami
oznaczeniami, które możemy sobie tutaj wrzucić i myślę, że możemy
się teraz tym zająć.
Potem zgrupujemy sobie wszystkie te klawisze jako osobną grupę,
a potem będziemy budować, tworzyć obudowę naszej klawiatury.
Dlatego na teraz to wszystko słyszymy się w lekcji następnej.