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.
Ok, jak to mówią lecimy z tematem.
Jesteśmy na stronie www..
spline design.
Taki jest adres i możemy bezpośrednio na tej stronie korzystać,
albo ewentualnie pobrać sobie wersję desktopową.
Ja tutaj zalecam pracować na wersji desktopowej, ponieważ mniej więcej tak jak
Sigma wydaje mi się, że pracuje się lepiej.
Na wersji desktopowej możemy zacząć zupełnie za darmo.
Jest to dosyć istotne, jeżeli potrzebny Ci jest split na
potrzeby przerobienia tego kursu.
Nie musisz żadnej wersji kupować.
Możesz to zrobić na wersji darmowej.
Jedyna różnica, a w zasadzie jeden jakiś tam minus będzie taki, że
gdzieś tam w rogu będzie się.
Gdzieś tam będzie migotał znak wodny w postaci tego kółeczka,
które jest logiem Split.
Okej, możemy przejść do products i mamy tutaj listę feature'ów,
które są dostępne w Spline.
Jest ich naprawdę dużo jak na taką młodą aplikację i cały czas one się pojawiają.
Pod koniec lata 2024 była spora aktualizacja Spline, gdzie mieliśmy
wprowadzenie takiej funkcjonalności jak modelowanie scen pod natywnie pod Androida
czy na przykład korzystanie z API.
Ponadto mamy takie funkcjonalności jak 3D, Modeling, Real Time, collaboration.
Możemy animować elementy, dodawać interakcje, bardzo zaawansowane
interakcje, możemy rzeźbić, budować materiały, dodawać fizykę czy
dodawać interakcje z pomocą klawiszy.
Ale możemy też dodawać wideo, tekstury, obrazy, tworzyć buliony, projektować
assety z materiałami z materiałami, eksportować, eksportować kod,
kontrolować kamerę, budować komponenty czy na przykład zdarzenia typu drag and drop.
Jest tego dużo i będziemy poznawać te funkcjonalności w trakcie.
W trakcie kursu możemy projektować również sceny pod
Vision OS, pod iOS a czy generować całe aplikacje?
Tworzyć aplikacje pod iOS a, czy osadzać nasze sceny trójwymiarowe w
kodach Swift w celu umieszczenia naszych scen w aplikacjach na iOS a?
Tak jak wspomniałem, możemy też projektować natywnie pod Androida.
My skupimy się tutaj na budowaniu scen z wykorzystaniem ich w Webflow,
więc będziemy gdzieś tam raczej przemieszczać się w
obszarach takich jak UI.
Tutaj na stronie głównej już mamy prostą scenę, z którą możemy wejść w interakcję.
Wystarczy, że tutaj najedziemy sobie na naszego królika i on się tutaj podnosi.
Z fajnym obrotem tak.
Ponadto możemy sterować sobie kamerą.
Wystarczy, że po prostu przytrzymamy lewy klawisz myszy i zaczniemy poruszać myszą.
Możemy sobie podejrzeć przykładowe sceny, jak one wyglądają w powiększeniu
są zbudowane w całkiem przyjemny sposób i kiedy dodamy do nich interakcję, a
następnie wrzucimy je do interfejsu strony internetowej czy aplikacji, będzie
to działać bardzo, bardzo fajnie.
Ok, możemy wybrać sobie Sea of Examples i
zobaczyć tutaj bardziej taką skomplikowaną, rozbudowaną bibliotekę.
Tutaj w tym podglądzie, w tym preview nie możemy nic zrobić z obiektami.
Możemy je sobie tutaj pozaznaczać, ale nic nie możemy z nimi zrobić.
Możemy zalogować się i wtedy możemy skopiować sobie ten projekt i edytować
go w naszym obszarze roboczym.
Mamy też dostęp do biblioteki assetów, z których możemy korzystać zupełnie za
free, nawet w projektach komercyjnych.
Jeśli chodzi o pricing, zajmiemy się tym w lekcji następnej.
Teraz natomiast warto pamiętać o tym, że na potrzeby samego szkolenia samego tego
kursu wystarczy nam wersja podstawowa, która jest zupełnie darmowa.