Interaktywne Sceny 3D w Webflow
2 godz. 30 min · Grafika motion i 3D
Michał WedlechowiczSpline 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.
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.
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.
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.
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.
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.
Wracam do naszego uproszczonego projektu Switcha.
I tutaj z racji tego, że skopiowaliśmy sobie wcześniej cały model klawiatury,
usunęliśmy to, co było nam niepotrzebne i zostawiliśmy tylko ten kick caps.
No to zostały również tutaj wszystkie assety w postaci grafik w postaci nie
użytych materiałów, więc to wszystko musimy usunąć, ponieważ
to wszystko jest zawarte w tym, w tym pliku, w tej scenie i oczywiście
będzie determinować dodatkową wagę.
Dlatego jeżeli przyjdziemy sobie tutaj, no to widzimy, że mamy na przykład gold
metal, które możemy sobie usunąć, bo nie jest nigdzie użyty czarny
klawisz, nigdzie nie jest użyty.
Metal sobie zostawimy, bo ja użyłem go do sprężyny Glass.
Też sobie zostawimy, bo to jest.
Materiał, który determinuje wygląd tego przeźroczystego elementu,
więc to sobie zostawimy.
Image assets.
Tutaj troszkę ich zostało.
One w zasadzie nie ważą dużo, bo razem chyba dają dwadzieścia kilka
kilobajtów, ale możemy je usunąć.
Ja już część z nich usunąłem.
Na pewno zostawimy sobie quick save, czyli ten, ale te sobie tutaj usuniemy.
Reload również.
W porządku, zobaczmy jak działa nasz klawisz.
Myślę, że bardzo fajnie się to animuje i ja jestem jak najbardziej
zadowolony z tego efektu.
Natomiast.
Możemy sobie ustawić na przykład taki widok.
Tutaj też chciałbym, żebyśmy sobie ustawili na jakiś customowy na przykład
powiedzmy 700 700.
I wyśrodkujmy sobie to w ten sposób.
Okej, wszystko nam się pięknie mieści.
Możemy wybrać export.
Wybierzmy sobie viewer i wybierzmy Run test.
I widzimy, że ten plik waży troszeczkę dwa megabajty.
To jest zdecydowanie za dużo i możemy zobaczyć tutaj, gdzie
mamy jakieś ostrzeżenie.
Wszystko nam się wyświetla na zielono, czyli ilość świateł, jakieś efekty z ilość
poligonów boolean to wszystko jest ok.
Im więcej, im większe liczby tym możemy tutaj mieć jakieś ostrzeżenie
na żółto lub na czerwono alarm.
Ale na przykład tutaj mamy wyzwania, które stoją przed nami,
aby zoptymalizować ten plik.
Mamy Avoid using high subdivision level when possible, czyli unikaj dłużej
wysokich wartości dla tego modyfikatora subdivision,
który wygładza i uśrednia nasze.
Bryły.
Możemy sobie tutaj rozwinąć i widzimy, które z brył używają zbyt dużych.
Które z obiektów 3D używają zbyt wysokiego poziomu Subdivision.
Mamy tutaj dwie kości, które ustawione są na trzy.
Jeżeli klikniemy w tą strzałeczkę, to od razu pojawia nam się obiekt, który.
Wyświetla nam się obiekt, który tutaj ma ustawione Subdivision Modifier.
Na trzy ustawmy sobie dwa.
Okej i wybierzmy sobie jeszcze jeden Cube.
Ustawmy sobie na niego dwa.
Okej, niech to wróci na miejsce.
Wybierzmy jeszcze raz test.
Troszeczkę nam tutaj zjechało z tych wartości, no ale już więcej tutaj
nie zmniejszymy tych ilości.
Mamy clean up scene by removing and used materials i faktycznie mamy coś.
Mamy tu jakiś materiał, który jest nieużyty.
Możemy po prostu wrzucić go do kosza.
Mamy jeszcze podpowiedź Clean up the scene by removing in use the image asset.
Czyli możemy też zoptymalizować naszą scenę pod takim
kątem, żeby usunąć wszystkie nieużywane bitmapy.
Tak więc też możemy sobie wybrać koszyk, wybierzmy run test.
No i ok, tutaj wszystko mamy na zielono, ale te wartości jeszcze są
w tym przypadku za duże, a w tym przypadku 75 to troszeczkę za mało
jeśli chodzi o loading time score, czyli punktacja
czasu ładowania 100 to jest oczywiście super szybko, Więc będziemy dążyć do
tego, żeby zbliżyć się do tych wartości.
Tutaj oczywiście zależy nam na jak najmniejszej, jak najniższej wartości.
No ok.
No ale skoro wszystko mamy na zielono, to tak naprawdę co możemy tu jeszcze zmienić?
Wykorzystaliśmy tekstury, które są wbudowane w line, takie jak tekstury,
które posłużyły nam do warstwy Madcap. Oraz.
Tekstury, które posłużyły nam do zbudowania tej takiej
porowa tej powierzchni.
I teraz nikt nie daje nam gwarancji, że te tekstury są lekkie.
Dlatego ja proponuję, żebyśmy tutaj zastosowali swoje własne.
Przejdziemy do Image Assets i dodam sobie tutaj cztery assety.
Wybiorę tutaj Replace Image i na przykład wybiorę sobie Noise Bump.
Tutaj znowu wybieram Replace Image i na przykład niech to będzie Grey Matchup.
Tutaj też klikam Replace Image i tutaj ja sobie wybieram te obrazy z.
Mojego dysku.
Ja wcześniej przygotowałem sobie te pliki i zwróćmy uwagę, że one są ultralekkie,
mają po kilkadziesiąt kilobajtów.
Wybierzmy sobie jeszcze Glassmat Cup.
I ostatni to są obrazy przygotowane w Photoshopie Scratch
Matcap na przykład, tak.
No i dobra, mamy teraz cztery takie sety i możemy je nazwać
na przykład Niech będzie napis tutaj niech będzie, nie wiem, plastik jeden,
tu będzie glass, tu będzie plastik. Dwa.
No i ok.
Upewniam się, że mamy, że mamy wszystko oznaczone.
Ja wcześniej te wszystkie materiały, które wykorzystałem tutaj,
dodałem sobie do assetów.
Te niepotrzebne, oczywiście niewykorzystane materiały
zostały usunięte.
No i teraz wybierzmy sobie na przykład Springa i mamy tutaj matchup.
Ja proponuję, żebyśmy nie korzystali z tych tutaj grafik, tylko wybrali sobie,
powiedzmy tą na przykład.
Zobaczymy, jak to będzie wyglądać jako matka P.
Dalej Orange plastik.
Tutaj jako matka wybierzemy sobie może tą.
Na przykład.
Red.
Plastik, Może tutaj matka Wybierzemy sobie ten.
I został nam glass I tutaj też mamy Matka x 2.
Tak naprawdę wybierzmy sobie ten.
A ten może usuniemy.
Ok, Możemy ewentualnie dodać sobie jeszcze jedną warstwę.
Tutaj też może to być matkaP.
Ale skorzystamy z jednego z tych naszych. Może ten.
Dajmy tutaj tryb mieszania screen.
A teraz jeśli chodzi o Kiks Material.
Tutaj mamy obraz, który definiuje tą porowatość tego klawisza i
ok, ale może zamieńmy go na przykład na ten noise?
W porządku, i mamy tutaj też matcap.
Może wybierzmy sobie właśnie ten albo ten.
Myślę, że ten gra lepiej.
W porządku, te tekstury przygotowałem sobie wcześniej w Photoshopie
i dają one bardzo fajny efekt.
Zobaczmy jak wyglądają tutaj.
W porządku, mnie się to podoba.
Możemy jeszcze troszeczkę oddalić sobie to od
oddalić kamerę od naszego przycisku, tak, żeby w momencie, kiedy nam
się to rozjedzie, żeby był widoczny w całości.
Okej, bardzo fajnie.
No i teraz wybierzmy sobie export.
Od razu widzimy, że tutaj już mamy na zielono i informację o tym, że
nasza scena została zoptymalizowana.
Wybierzmy sobie run test.
No i super. Nasza scena waży 159 kilobajtów.
Świetnie!
Oznacza to, że te tekstury dedykowane od Spline no są ciężkie.
Loading time mamy 99 na 100, więc super extra możemy sobie skopiować.
Ale może zanim do tego przejdziemy, no to wybierzmy sobie settings
tu wybierzmy sobie.
No no no Oczywiście jeśli chcesz możemy to zostawić, ale ja sobie tutaj wybiorę.
No.
dalej Background color ustawimy sobie na height czyli schowaj i wybierzmy.
Ewentualnie możemy sobie tutaj wybrać kompresję geometrii, ale zostawmy default.
Może image quality ustawmy na 70.
To też nam jakoś wpłynie tutaj na ten performance i wybierzmy
sobie Update Viewer.
No i teraz wybieram Overview, kopiuję, a następnie przechodzę do Webflow.
Tutaj mamy ten drugi element spline.
Klikam na trybik i wybieram Command V.
Zobaczmy jak to wygląda.
Bardzo fajnie nam tutaj gra to wszystko.
Zastanawiam się, czy nie będzie fajnie, jeśli zmniejszymy ten odstęp pomiędzy tymi
sekcjami, bo on jest troszeczkę za duży tutaj.
Spróbujmy to zrobić.
Tutaj może u góry zostawmy sobie 0.
I zobaczmy teraz.
Ok. No i fajnie.
Pięknie to wygląda.
Ale to nie wszystko.
Korzystając z tego, że tak naprawdę Webflow daje nam ten komponent spline, to
możemy sobie bezpośrednio Webflow sterować każdym z osobna obiektem.
I teraz będę chciał to zrobić.
A w jaki sposób chciałbym wykorzystać tą możliwość?
Zwróćmy uwagę, że kiedy najeżdżam kursorem na nasz klawisz, to on się rozczłonkowuje,
jeśli możemy tak to nazwać.
Chciałbym wyłączyć w zasadzie tą funkcjonalność w spline, a włączyć ją w
Webflow i chciałbym żeby ten przycisk się rozczłonkował w momencie gdy będziemy
scrollować stronę, czyli kiedy ja będę zjeżdżał.
W dół strony, to chciałbym, żeby teraz, w tym momencie nasz przycisk zaczął się
zintegrować.
I tutaj na przykład w tym miejscu, żeby skończył tą operację sam, bez
jakby bez mojego udziału, bez tutaj mojego jakiegoś wędrowania po nim myszą.
Tak bym zaprojektował ten ruch i myślę, że możemy śmiało zrobić to w lekcji
następnej, ponieważ w lekcji następnej właśnie będę chciał Ci
pokazać jak wykorzystać ten komponent Spline w aplikacji Webflow i
na co on tam, Na co on nam tak naprawdę pozwala?