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, więc w tej lekcji omówimy sobie Welcome screen, a częściowo już
omówiliśmy go w lekcji poprzedniej.
Ale zacznijmy od początku.
Tutaj u samej góry mamy nasze projekty.
Możemy wybrać sobie wall i wtedy widzimy wszystkie projekty, nad
którymi pracowaliśmy ostatnio.
To jest zakładka My Files, czyli moje pliki.
Możemy wybrać sobie home i wracamy tutaj do tego Welcome screenu.
Możemy sobie tutaj wybrać następnie opcje Generate, gdzie możemy wybrać start,
a następnie spróbować sobie wygenerować jakiś model 3D
przy wsparciu sztucznej inteligencji.
Mamy tutaj też kilka takich tipów podpowiedzi, że warto skupiać
się na jednym elemencie, a nie na kilku.
Czyli tutaj na przykład dog, a nie Tree dogs.
Następnie wybierzmy next.
Kolejny hint to Close uphill offer more details.
Czyli jeżeli skupimy się na jakimś jednym konkretnym elemencie, na przykład bardziej
rozbudowanej postaci, to wtedy będzie ona posiadała więcej detali, więcej szczegółów
niż taka cała postać od stóp do czubka głowy.
Tak, dalej możemy skupić się na obiektach, które nie potrzebują jakiejś
bardzo dużej precyzji.
Na przykład maszynom będzie łatwiejszy do stworzenia niż jakiś
skomplikowany procesor, który jako model 3D stworzony przez AI na pewno nie
będzie jakiś tam super doskonały.
I czwarte możemy użyć funkcji remix.
Do generowania wariantów możemy wybrać Let's go i pobawić się
troszeczkę w budowanie takich modeli.
Tutaj możemy wpisywać sobie prompt, ale tym zajmiemy się później.
Tutaj mamy pliki, z którymi ktoś z nami się podzielił.
Nikt ze mną nie chce się dzielić plikami. Okej.
Następnie mamy tutaj społeczność, czyli Community.
I tutaj tutaj zaglądam bardzo często, ponieważ stąd można pobrać całą masę
inspiracji, ale ponadto możemy też skorzystać z tych projektów, które są
udostępniane przez użytkowników Spline.
Każdy z takich projektów możemy sobie skopiować do swoich plików i
zobaczyć, jak taki projekt działa.
Ponadto mamy tutaj też możliwość podejrzenia interakcji.
Na przykład jeżeli wybierzemy sobie ten projekt, a następnie
po tym, jak on się załaduje, klikniemy na niego raz jeszcze,
no to otwiera nam się on i zobacz i w jaki sposób on działa, jaką mamy tutaj fajną
interakcję z tą literą A i z tym systemem cząsteczkowym.
Tak.
Bardzo fajnie to wygląda.
Klikam raz jeszcze, aby zobaczyć.
Podgląd tego projektu.
A, no i bardzo, bardzo fajną interakcję.
Wchodzą ze mną te particle.
Także to jest jeden z takich projektów.
Możemy sobie wybrać tutaj wstecz i podejrzeć na przykład jakiś inny.
Może na przykład ten.
Klikam i zobaczmy co tutaj mamy.
Bardzo fajne rozwijane menu.
Działa bardzo fajnie.
Możemy sobie tutaj poobracać tą sceną, zobaczyć jak tutaj
fajnie światło się układa na tych na tych obiektach.
Działa to bardzo fajnie, bardzo precyzyjnie i warto o tym wspomnieć,
że są to bardzo lekkie i lekkie pliki.
Możemy też zwrócić uwagę na to, ile osób skopiowało sobie ten projekt do
swoich, do swoich własnych bibliotek.
Tutaj mamy ponad 4 tysiące użytkowników.
Jeżeli my wybierzemy remix, to ten projekt zostanie skopiowany już do naszych plików.
Wybieram My Files i mamy tutaj to tutaj w naszej bibliotece,
więc to jeśli chodzi o community, dalej mamy tutorial, czyli krótkie
samouczki przygotowane przez twórców SPline Dostępne na YouTube.
Następnie mamy library, czyli bibliotekę.
Tutaj mamy bibliotekę gotowych już modeli 3D, które możemy wykorzystać
w naszych projektach.
Nie musimy wszystkiego modelować od początku od razu, ponieważ ta biblioteka
jest całkiem bogata i posiada całą masę fajnych obiektów.
Ale oczywiście jeżeli czegoś tutaj nie ma, będziemy musieli to sami zaprojektować.
I po to jest właśnie ten kurs.
Jeśli jakieś projekty przerzuciliśmy do archiwum, bo tak można.
Wystarczy, że wybierzemy sobie prawy klawisz myszy, a następnie Move to Archive
to dostęp do tego archiwum mamy tutaj i tutaj są wszystkie jakieś stare projekty,
które sobie wcześniej tutaj przerzuciliśmy.
Z takiego archiwum każdy projekt możemy sobie usunąć.
Wystarczy, że wybierzemy prawy klawisz myszy, a następnie usuń.
Trwale potwierdzamy to i jeśli chcemy stworzyć nowy dokument,
nowy plik, to wystarczy, że wybierzemy sobie tą ikonkę plusa albo w tej sekcji
Home, czyli na stronie głównej na stronie głównej wybierzemy sobie New file.
A teraz to wszystko w tej lekcji. Przechodzimy dalej.