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.
Dobra, to lecimy dalej.
Teraz jeżeli ja zaznaczę sobie ten obiekt, to mogę wybrać Edit Mesh I znowu
przechodzę do trybu Smooth.
Edit W lekcji poprzedniej rozmawialiśmy też wspomnieliśmy w zasadzie tylko o
modyfikatorze Subdivision, który z automatu z automatu nam się włącza
przy przejściu do trybu Smooth.
Edit I co on tak naprawdę nam daje?
To jest bardzo fajna opcja.
Zwróć uwagę, że jeżeli ja teraz na przykład zaznaczę sobie tą płaszczyznę,
to mogę sobie ją mogę w tę płaszczyznę wbudować inną
płaszczyznę za pomocą narzędzia Insert.
Zaznaczam sobie to narzędzie.
A teraz pojawiła mi się taka niebieska kulka.
Jeżeli wcisnę i przytrzymując lewy klawisz myszy pociągnę za tą kulkę, to mogę sobie
stworzyć dodatkową płaszczyznę wewnątrz tej płaszczyzny.
I teraz jeżeli znowu wybiorę sobie narzędzie Extrude mogę sobie wyeksprudować
tą płaszczyznę, co sprawi, że otrzymam tego rodzaju tego rodzaju kształt.
Jeżeli teraz włączę sobie modyfikator Subdivision, no to widzimy, że te
płaszczyzny zostają uśrednione.
One są troszeczkę zaokrąglone, żeby ten obiekt wyglądał bardziej
na bardziej wygładzony.
Natomiast ja chciałbym część z tych krawędzi odzyskać.
I jak mogę to zrobić?
Wystarczy, że wybiorę sobie narzędzie lub kadr.
I tutaj widzimy, że fajnie to narzędzie wykrywa nam tutaj krawędzie i na przykład
mogę stworzyć sobie krawędzie dookoła w tym miejscu, a następnie krawędzie
mogę sobie przesunąć tutaj.
I to samo mogę zrobić jeszcze raz.
I przesunę sobie je tutaj, teraz.
A jeśli kliknę w tym miejscu, no to analogicznie możemy sobie
przesunąć krawędzie w tę stronę.
Ale ja chciałbym, żeby te krawędzie tutaj dojechały do krawędzi, więc muszę tutaj
wybrać tak zwane narzędzie edge Slide.
I teraz jeżeli ja sobie wybiorę to narzędzie, to widzimy, że te krawędzie
ładnie nam się dopasowują do sąsiadujących krawędzi, a w ten sposób.
I na przykład znowu zrobimy sobie tutaj kolejne takie przecięcie.
W ten sposób.
No i widzimy, że udało nam się stworzyć coś takiego.
Taki właśnie kształt.
Ok, kontynuujmy to.
Wybieram znowu lookout.
Ok. I na przykład dojdźmy sobie tutaj.
Wybieram znowu lookout, wybieram znowu kad.
Tym razem klikam tutaj i mogę przemieścić sobie te krawędzie w ten sposób.
Ok.
I w ten sposób otrzymaliśmy taki fajny obiekt, który został dodatkowo jeszcze
wygładzony za pomocą modyfikatora Subdivision.
Co nam daje modyfikator Subdivision?
Poza tym, że są te obiekty zaokrąglone delikatnie, tak naprawdę.
Daje on nam takie złudzenie, jakby te obiekty zbudowane były z bardzo dużej
ilości płaszczyzn, z bardzo dużej ilości poligonów, czyli vertex edge i face'ów.
Tak, ale tak naprawdę jest to tylko złudzenie i.
Dzięki temu, że jest to tylko złudzenie, to nie obciążając tego pliku jesteśmy w
stanie otrzymać takiej świetnej jakości obiekt, który nie jest zbyt
kanciasty, jest zaokrąglony.
Ok, to jednocześnie też przyspieszy naszą pracę, bo teraz chciałbym przejść do
bardziej do czegoś bardziej praktycznego.
Stworzymy sobie model jakiejś wesołej rybki, której dodamy
swego rodzaju interakcję.
Ja chciałbym zrobić to troszeczkę inaczej niż w oficjalnych tutorialach spline.
Chciałbym to zrobić troszeczkę bardziej po swojemu i pokazać Ci jednocześnie,
jakie mamy fajne funkcje do wyboru.
Skorzystamy oczywiście z tych technik modelowania, które
pokazałem Ci w tej lekcji.
Myślę, że ten obiekt możemy sobie usunąć, nie będzie nam potrzebny.
A teraz to wszystko słyszymy się w lekcji następnej.