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, to teraz warto zastanowić się nad podmianą wszystkich tych
literek na naszej klawiaturze.
I tutaj nie ma jakiegoś złotego środka, który by za nas to zrobił.
Trzeba to będzie zrobić ręcznie.
Ale jest tutaj jedna ważna rzecz, o której należy pamiętać przy
tego rodzaju operacjach.
Jeżeli przejdziemy do Assets, to mamy tutaj listę wszystkich
wykorzystanych assetów.
Mianowicie mamy tutaj.
Chodzi mi konkretnie o tą sekcję Image assets.
Widzimy tutaj wszystkie załadowane obrazki bitmapowe,
więc jeżeli teraz ja będę chciał na przykład przejść do tej instancji,
wróćmy do Objects i tutaj rozwinąć i dojść tutaj do tego key image, to jeżeli
ja tutaj przejdę do materiału i mając tutaj zaznaczoną tą literkę,
kliknę na te suwaki i załaduje sobie zupełnie inny obraz, to niestety zostanie.
Zostanie podmienione.
To niestety literka W.
Która tutaj była została podmieniona na literę Y i widzimy to na wszystkich
obiektach, w których była ta bitmapa wykorzystana.
Dlatego No niestety musimy tego.
Dlatego niestety musimy na to uważać, żeby czegoś takiego nie zrobić i po prostu
tutaj wystarczy wybrać ikonkę plusa, aby dodać nowy obraz.
I tu dopiero dla tego nowego obrazu wybieramy suwaki, a następnie wybieramy
Replace Image i wybieram nową literkę, na przykład literkę T
i widzimy, że teraz została ona dodana tylko do tego konkretnego obiektu.
Ok, zobaczmy tutaj co mamy.
Nie musimy też wchodzić gdzieś tutaj bardzo głęboko, tak aby
odszukać ten kij image.
Wystarczy, że zaznaczymy sobie tą grupę i mamy tutaj wykorzystane materiały.
Możemy przejść do tego materiału i od razu tutaj bezpośrednio możemy wybrać image, a
następnie stworzyć sobie nowy slot na image i wybrać sobie suwaki.
Załadować obrazek, na przykład powiedzmy.
Ten ok.
I na przykład to samo zrobimy tutaj.
Dodaje nowy slot Za pomocą plusa wybieram suwaki i ładuję obrazek.
I niech to będzie na przykład Gun Reload.
Koniec.
Jeszcze jedna rzecz, na którą warto uważać, jeżeli chcemy zmienić
bitmapę w tym obiekcie, który jest naszym głównym komponentem White Key,
no to zostanie ta zmiana naniesiona na wszystkie instancje, w których jeszcze
nie podmieniliśmy tych literek.
Po prostu jest to główny komponent i będzie on oddziaływał na
wszystkie pozostałe instancje.
Chyba, że w tych instancjach już jest bitmapa podmieniona, tak
jak na przykład tutaj.
Jeżeli ja teraz, mając zaznaczony ten główny komponent, przejdę do materiałów.
I tutaj wybiorę sobie image, a następnie dodam ikonkę plusa, aby
załadować nową literkę.
Na przykład Quicksave.
No to widzimy, że zostało to wrzucone wszędzie tam, gdzie jeszcze
nie podmieniliśmy literek.
Zaznaczmy sobie teraz tą instancję.
Tutaj przejdziemy do materiałów, wybierzemy sobie image i
tutaj wybierzmy sobie view.
Ok, to wszystko w tej lekcji.
Ja teraz w przerwie podmieniam sobie te literki tak, żeby ta klawiatura
miała jakiś większy sens.
A teraz to wszystko.
W tej lekcji słyszymy się w lekcji następnej.