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.
Myślę, że będzie dobrze, jeśli najpierw zbudujemy sobie naszą rybę, a później
stworzymy jakieś tekstury.
Więc dodamy sobie jeszcze jeden element tutaj u samej góry, czyli taką jakąś
górną płetwę, tak jak to zrobić?
Myślę, że możemy tutaj znowu wybrać sobie Cube'a, czyli kostkę.
Ustawmy ją tutaj u samej góry.
Upewnijmy się, że mamy widok idealnie z boku i myślę, że
nie będziemy sobie tutaj nic zaokrąglać.
Spłaszczamy jeszcze wyrównamy nasz obiekt tutaj względem ryby.
Okej, ładnie nam się to wyśrodkuje teraz.
O właśnie spłaszczmy nasz obiekt.
Jeszcze tutaj wydłużymy i w ten sposób go spłaszczymy.
Może jeszcze wydłużymy troszeczkę w ten sposób, Okej.
No i wybieramy Smooth Edit.
I teraz to co nas interesuje to naturalnie.
Tutaj może jeszcze tu Ok.
I może jeszcze w tym miejscu to co chciałbym zrobić, to
na pewno zaznaczę sobie.
Te krawędzie, a następnie przeniosę je troszkę niżej Tutaj te również.
Może nawet jest mniejsze troszeczkę.
Ok. I może.
Może wyciągnę je tu.
Następnie zaznacz te krawędzie i mogę je troszeczkę powiększyć.
Przeniosę je na przykład tu, bardziej do przodu.
Ok, może obrócę sobie w ten sposób.
A następnie zaznaczę sobie te edge, te wertexy i wyjadę z
nimi na przykład tak.
Teraz zwiększymy sobie stopień tego modyfikatora Subdivision.
No i mamy już taką górną płetwę.
Wygląda całkiem fajnie, ale oczywiście możemy iść o kilka kroków dalej.
Na przykład możemy sobie zaznaczyć teraz te wertexy i też sobie
tutaj jakoś to wyciągnąć.
Tutaj proponuję, żebyśmy sobie te wertexy troszeczkę schowali
te może troszeczkę damy tutaj.
O tak, i tutaj zrobimy coś takiego.
Następnie znowu tutaj dodamy sobie jeszcze jeden lub dwa.
Ok, możemy obrócić i od razu te.
Krawędzie w ten sposób.
Ok.
I na przykład wybierzmy sobie teraz V, czyli zaznaczenie vertex
ów i to wyciągnijmy.
Ok? No to sobie troszkę schowamy.
No i okej, wygląda całkiem fajnie.
Możemy wyłączyć tryb edycji.
No i okej. Kolejny element za nami.
Wygląda to całkiem fajnie.
Myślę, że możemy teraz śmiało przejść dalej.
Nie musimy wybierać skrótu klawiatury Commands lub Ctrl+S, ponieważ
automatycznie zapisuje wszystkie zmiany w naszych projektach.
A teraz to wszystko słyszymy się po przerwie.