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.
Proces nauki dobiegł końca w tym kursie.
Ja w tej lekcji chciałbym się z Tobą pożegnać i krótko podsumować
i powiedzieć Ci co.
Co możesz zrobić dalej?
Jakie kolejne kroki możesz wykonać, aby robić coraz lepsze projekty w spline?
Potrzeba nam jest dużo inspiracji i w tym celu zachęcam Cię do tego, żebyś na
przykład na LinkedIn polubił oficjalny profil Spline.
Chyba codziennie są tam publikowane bardzo fajne i
kreatywne prace innych twórców i naprawdę jest się czym inspirować.
Zarówno jeśli chodzi o sam design, jak i również o animacje i interakcje.
Jest tego naprawdę dużo i.
Warto tutaj zajrzeć od czasu do czasu, bo jest sporo fajnych rzeczy.
Ta animacja szczególnie jakby mnie tutaj.
Pasjonuje, bo jest rewelacyjna.
Możemy sobie za typowy produkt zamodelować i dodać go do strony jako
w pełni działający interaktywny model.
Wygląda to w zasadzie nawet lepiej niż na stronach produktowych u Apple'a
i no kurcze, no splin to jest naprawdę świetne narzędzie,
rozwija się bardzo szybko.
Ja pamiętam jak jeszcze raczkowało i to naprawdę niedawno, bo kilka lat temu, a
teraz już mamy pełnoprawne narzędzie, w którym możemy
tworzyć naprawdę świetne modele i wrzucać je jako lekkie pliki na stronę
internetową nie tylko w Webflow.
Więc zachęcam do takiej inspiracji.
Na pewno warto też zaglądać bezpośrednio na community w spline, czyli tutaj,
ponieważ często pojawiają się też nowe, nowe sceny i niektóre z nich naprawdę są
rewelacyjne.
Każdą z nich możemy sobie podejrzeć na przykład.
Zobaczmy, co tutaj jest.
Każda z nich zawiera jakieś interakcje i zawsze możemy kliknąć sobie tutaj.
No i zobaczmy jak co tutaj się dzieje.
Tak, to jest w ogóle mega super abstrakcja i.
Wygląda i pracuje to rewelacyjnie.
Zawsze każdy z tych modeli, które są.
Każda z tych scen, które są tak naprawdę tutaj w tym community
możemy sobie skopiować.
Każdą z tych scen, możemy sobie skopiować do swoich draftów, do swoich projektów i
zobaczyć, odtworzyć ją i zobaczyć jak została wykonana, jak została
skomponowana, jakie zostały zostały do niej dodane interakcje.
Wystarczy, że wybierzemy remix i widzimy, że tutaj 3100 osób również użyło tego
przycisku i zobaczyło jak działa ta.
Animacja.
Ok, wróćmy do community.
Dużo scen jest abstrakcyjnych, ale ta abstrakcja to też jest swego
rodzaju bardzo fajne doświadczenie.
Zależy też oczywiście jak działa, bo na przykład tutaj jest
to zrobione bardzo fajnie.
To są tylko i wyłącznie kostki, nic więcej.
I jest dodana animacja drag and drop.
Tutaj też możemy znaleźć sporo inspiracji i sporo przede wszystkim się nauczyć.
Kopiując te projekty i rozgrzebując i Patrząc jak są skonstruowane.
Dlatego to jest kolejna rzecz, do której Cię zachęcam jako dalszy krok, czyli
Spline Community oraz profil na LinkedInie.
No i cóż, no nauczyłeś się więcej niż podstawy spline, bo wiesz już jak
projektować modele, jak dodawać do nich interakcję, jak tworzyć materiały,
zapisywać je jako assety.
Jak budować animacje, dodawać różnego rodzaju akcje nie tylko do
pojedynczych elementów, ale również do grup.
No i oczywiście wiesz jak korzystać z komponentu Spline w Webflow.
I wiesz, co on nam daje?
Tak naprawdę daje nam dostęp do każdego elementu naszej sceny
zaprojektowanego spline.
I jak widzisz, możemy każdy element animować sobie bezpośrednio w Webflow.
No cóż, z mojej strony to wszystko.
I jeszcze raz dziękuję Ci za uwagę.
Mówił do Ciebie Michał Lechowicz zw. pl.
Do usłyszenia w kolejnych materiałach. Cześć.