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.
W tej lekcji zajmiemy się Clonerem.
Stworzymy sobie kolejny obiekt.
Będzie to na przykład Con.
Na przykład coś takiego.
Jeśli chodzi o ten obiekt, to myślę, że troszkę go sobie powiększymy.
I teraz znowu tutaj.
Jest to obiekt zdefiniowany, któremu możemy zwiększać ilość boków czy
sterować jego jakby tutaj tym kontem.
Ewentualnie możemy troszeczkę sobie bardziej zaokrąglić
tutaj go od góry czy od dołu? Myślę, że od dołu.
Zaokrąglijmy go sobie troszkę mniej.
Zwiększymy tutaj wartość sites.
Ok, może do powiedzmy dwudziestu czterech. Ok.
Myślę, że wygląda fajnie. Kolor.
Na razie może ustawmy sobie jakiś jaśniejszy.
Jeszcze bym chciał ten obiekt zmniejszyć, więc mogę zaznaczyć go następnie z shiftem
chwycić za kulkę Shift oczywiście zagwarantuje nam to, że
ten obiekt będzie tutaj nam się skalował proporcjonalnie.
Teraz chciałbym, żeby on pełnił rolę takiego kolca i żeby znalazł się na naszej
rybce gdzieś tutaj, bardzo nieregularnie.
No i oczywiście moglibyśmy go kopiować, kopiować i doklejać tutaj do tej ryby,
ale ja chciałbym zrobić to inaczej.
Mamy tutaj coś takiego jak cloner.
Włączymy sobie teraz ten cloner i widzimy, że możemy sobie
tutaj zwiększać ilość tych obiektów.
Przeniesiemy się tutaj niżej.
Możemy sobie zmieniać pozycję każdego poszczególnego klona
czy na przykład skalę, albo też i rotację.
Okej, ale przejdźmy do Type, a następnie rozwiniemy sobie tutaj
listę i wybierzmy Object.
Chciałbym, żeby obiektem, do którego będą doklejone nasze kolce
było body naszej rybki.
Ja proponuję też, żebyśmy od razu sobie nazwali te obiekty.
Na przykład. To niech będzie właśnie body.
Zaznaczam nasz kolec.
I wybieram object body.
Ok, no i widzimy, że zostało to tutaj poprzyklejane,
ale nie do końca o to mi chodziło.
Przejdźmy niżej i wybierzmy sobie Axis.
A następnie wybierzmy Y.
O i teraz wygląda to znacznie lepiej.
Spread mamy ustawiony na random, ale możemy na przykład przykleić kopię takich
obiektów do każdego polygona, co niezbyt dobrze wygląda.
Możemy na przykład do każdej krawędzi dokleić sobie taki
obiekt, czy na przykład do każdego vertexa.
Ale myślę, że u nas będzie lepiej wyglądało.
Random.
No i oczywiście możemy tutaj sobie za pomocą tej funkcji seed sprawdzić,
jak to będzie wyglądało. Możemy też zwiększyć ilość tych kolców.
A więc teraz działa to w ten sposób.
Mamy tutaj 34.
Całkiem fajnie. Jeszcze tutaj popracujmy z tym Seed.
Zobaczmy jak to będzie wyglądać.
Byłoby fajnie, gdyby nie były one tutaj wewnątrz tych ust, bo
niezbyt dobrze wyglądają, więc może zmniejszmy ilość i jeszcze
pobawmy się tym parametrem set.
Tutaj wygląda to całkiem śmiesznie.
Nie chciałbym, żeby nasza ryba gdzieś tam wewnątrz miała jakiś kolec a.
Więc spróbujmy jeszcze się tutaj pobawić z ilością.
Ok.
Wygląda na to, że teraz jest całkiem fajnie.
Co możemy zrobić z takimi obiektami?
Możemy je odsunąć troszeczkę, Na przykład korzystając z pozycji Y.
Możemy je wysunąć tutaj z naszej rybki, ale chciałbym je
troszeczkę bardziej zatopić.
Tak, Możemy je gdzieś tam sobie przemieszczać
na przykład, ale wtedy też widzimy, że one odklejają się od naszej ryby.
Możemy je skalować naturalnie.
Czy też rotować, ale to akurat chciałbym zostawić.
Niekoniecznie dobrze to wygląda.
Ustawmy tutaj pozycję X na pozycję Y.
Możemy ustawić w ten sposób.
Dzięki temu troszeczkę bardziej nam się te kolce wtopą w naszą rybkę.
No i teraz mamy jeszcze jeden problem, ponieważ został nam tutaj ten jeden obiekt
i jeśli przejdziemy znowu do Klonera, to ten obiekt bazowy możemy sobie
schować wybierając height.
No i wygląda to teraz w ten sposób. Więc ok.
Myślę, że na teraz to wszystko.
Przypominam, że nie musimy zapisywać zmian, ponieważ explain
robi to automatycznie.
Zapraszam teraz na krótką przerwę i słyszymy się w lekcji następnej.