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.
Rozpoczynamy kolejny rozdział naszego kursu, w którym porozmawiamy o nieco
bardziej zaawansowanych tematach i stworzymy bardziej praktyczny projekt.
Projekt produktowy, jakim chciałbym, żeby była klawiatura mechaniczna.
Chciałbym oczywiście, żeby klawiatura była interaktywna, żeby to był model, który
wykorzystamy na landing page'u produktowym i zbudujemy tutaj tak naprawdę dwa modele.
Pierwszy model to będzie działająca klawiatura.
Drugi model to będzie osobny projekt, w którym
stworzymy sam klawisz z całym mechanizmem, który będzie się animował
na stronie landing.
A więc powinniśmy sobie teraz założyć nowy projekt, więc mogę od razu
bezpośrednio wybrać sobie ikonkę plusa.
Możemy sobie od razu tutaj wybrać jakiś gotowy zestaw elementów, ale nie
będziemy tego robić, więc po prostu klikam gdzieś poza i zaczniemy od zbudowania
Budowania klawisza takiej klawiatury.
Podstawowy prostokąt usuwamy przytrzymuje alt.
Przekręcam się wokół naszej przestrzeni i chciałbym
teraz dodać sobie podstawowy Cube.
Klikam i mamy naszą kostkę.
To co chciałbym zrobić z naszą kostką to przede wszystkim pozbawić ją zaokrąglonych
krawędzi i od razu przejdziemy do Smooth and Edit.
No i teraz wymodelowanie takiego klawisza.
To jest tak naprawdę bardzo prosta rzecz, ale ja chciałbym zrobić nieco
bardziej nietypowy klawisz.
Zaczniemy od takiego prostego.
Zaczniemy od takiego standardowego wyglądu klawisza.
To co teraz zrobimy, to po prostu zaznaczymy sobie tą płaszczyznę,
a następnie z shiftem.
Chwytam za tą kulkę tutaj i delikatnie sobie zmniejszam tak,
ten subdivision Modifier.
Na razie ustawimy sobie na 0 tą górną płaszczyznę.
Ten fejs możemy sobie troszeczkę zmniejszyć.
Ok.
Teraz wybieram klawisz C, aby wywołać narzędzie lub kat i stworzę
sobie odcięcie w tym miejscu.
Tutaj na środku. I jeszcze jedno w tym miejscu.
Dokładnie w ten sposób.
Teraz jeżeli włączymy sobie Subdivision Modifier, no to
nasz klawisz zaczyna już w jakiś sposób wyglądać, ale teraz wybiorę sobie
klawisz V, aby zaznaczyć vertex.
A następnie zaznaczam ten vertex tutaj i wpuszczę go troszeczkę niżej, aby stworzyć
swego rodzaju wgłębienie na opuszek palców, bo takie
standardowe klawisze bardzo często mają taki element.
Wybieram teraz klawisz C raz jeszcze i myślę, że możemy dodać sobie tutaj w tym
miejscu i wybrać sobie narzędzie edge slide i podciągnąć sobie to
troszeczkę do góry w ten sposób.
O, na przykład tak.
Znowu wybierzemy sobie C i znowu E, czyli edge slide.
I przeniesiemy to niżej.
I w ten sposób udało nam się utworzyć taki standardowy kick caps standardowy klawisz.
Zazwyczaj klawiatury mają coś takiego.
Jeszcze sobie włączmy widok z boku i podniesiemy sobie wszystkie RTXY.
Upewniam się, że mam zaznaczone selection both sites, czyli zaznaczam te vertex
tutaj, które widzę oraz te, które są z tyłu.
Tak i troszeczkę je podniesiemy.
O na przykład tak.
No i dokładnie to jest taki standardowy rodzaj klawisza.
Ja jednak chciałbym, żeby nasze klawisze na klawiaturze były troszeczkę bardziej,
jakby to powiedzieć, uproszczone.
Chciałbym, żeby to był minimalistyczny, minimalistyczny design klawiatury
mechanicznej, choć tak naprawdę ciężko taki spotkać.
Dlatego obok tego elementu dodamy sobie jeszcze jeden element.
Wybierzmy znowu Cube.
Stawiam nową kostkę tutaj w tym miejscu.
I na pewno pozbawimy ją zaostrzonych, zaokrąglonych krawędzi.
Troszeczkę.
Troszeczkę ją zmniejszymy. W porządku.
I znowu wybieramy Smooth and Edit.
Na pewno wybierzemy sobie locate, czyli C.
Klikam w tym miejscu i jeszcze dodatkowo.
Tutaj ok.
Ten sam Division Modifier.
Może zwiększmy sobie do dwóch.
Znowu dodam dodatkowe krawędzi w tym miejscu i troszeczkę sobie je podniosę.
Dokładnie tak, żeby tutaj uzyskać taki bardziej.
Wyostrzony kant?
W porządku, to samo zrobimy teraz tutaj i przeniesiemy to w dół.
Dokładnie w ten sposób.
Co jeszcze możemy zrobić?
Myślę, że możemy bardziej ten obiekt podzielić, na przykład tworząc jeszcze
dodatkowe elementy w ten sposób.
I jeszcze tu i tu.
Ok. W ten sposób mamy coś takiego.
I.
To będzie nasz klawisz.
Ale jeszcze zrobimy jedną ważną rzecz, a mianowicie ustawmy się może w ten sposób.
Oczywiście on jest za wysoki, więc zaznaczymy sobie Vertex.
Wybieram klawisz V, aby przejść do trybu zaznaczania vertex ów.
Musimy ten klawisz mocno spłaszczyć.
Chciałbym, żeby nasza klawiatura była raczej klawiaturą niskoprofilową.
No i dobra, co teraz zrobimy?
Wybieram F, aby zaznaczać sobie płaszczyzny.
Zaznaczamy sobie z Shiftem te płaszczyzny.
Możemy sobie je troszeczkę powiększyć.
Na przykład tak.
I spróbujmy je sobie ekstrudować do góry.
Tak, żeby nasz kij caps miał swego rodzaju wnętrze.
Oczywiście nie przesadzajmy z tym, żeby nie wyjechać tutaj za wysoko,
dlatego dajmy to niżej, ciutkę.
Wybierzmy sobie insert face.
Okej.
Pięknie o to chodziło.
Dodamy sobie jeszcze tutaj i możemy sobie to przenieść w ten
sposób, aby tutaj zaostrzyć krawędzie.
I to jest nasz klawisz.
Chciałbym, żeby on tak wyglądał, żeby był taki dosyć prosty.
Może jeszcze zrobimy jedną rzecz.
Znowu wybieram V i zaznaczymy sobie vertex tutaj te na samym dole i delikatnie,
delikatnie sobie powiększymy ten klawisz tutaj.
Ok, i to jest dokładnie element jaki ja chciałem uzyskać.
Teraz jeżeli np.
Dodamy sobie cloner.
No to będziemy mieli coś takiego.
Spróbujmy tutaj wdrożyć jakiś materiał od razu, więc przejdźmy do sekcji
Material kolor tego klawisza.
Chciałbym, żeby był no raczej biały.
Myślę, że możemy tutaj spróbować dołożyć sobie np.
Jakiś matcap, ale nie chciałbym, żeby nasze klawisze się aż
tak mocno błyszczały, więc może spróbujmy sobie z takim nieco bardziej rozmytym.
Ok, tylko że tryb mieszania musimy oczywiście ustawić na.
Screen tak, aby wyłączyć sobie czarny kolor.
No i teraz myślę, że wygląda to całkiem fajnie.
Chciałbym aby te klawisze wyglądały bardziej plastikowo, więc
myślę, że tak jest ok.
Spróbujmy sobie jeszcze dodać fresnel.
Wybierzmy sobie +.
Zobaczmy jeszcze jak to będzie wyglądać z efektem fresnel.
Ale chociaż może nawet fajnie, bo te klawisze
zyskały tutaj taki rim light, więc może to dać fajny efekt.
Jeśli wyłączymy fresnel, nasze klawisze wyglądają tak.
A z tym efektem mają tutaj bardzo fajny rim light, więc chyba bym to zostawił.
Zastanawiam się jeszcze nad głębią. Spróbujmy.
Jeśli wybierzemy sobie znowu + to wybierzmy sobie teraz, tym
razem deep, czyli głębia.
Ja tutaj naturalnie nie ustawimy sobie na samym środku, a Far
przeniesiemy sobie tutaj ok.
Tryb mieszania może przestawimy sobie na overlay, ok.
Przy czym fresnel damy na Deep tak, żeby nie zniknął nam.
Nie zniknął nam ten rim light tutaj.
Ok. Fajnie.
Myślę, że całkiem przyjemne klawisze zrobiliśmy.
No i cóż.
No nie chciałbym, żeby te klawisze były takie bardziej tradycyjne.
Raczej wolałbym takie niskoprofilowe bardziej.
Więc ten element sobie myślę, że możemy usunąć.
I na teraz w tej lekcji to wszystko.
Pierwsze koty za płoty.
Mamy już podstawowy obiekt, któremu będziemy teraz nadawać interakcję
bitmapy, stworzymy sobie komponenty, no i generalnie zobaczymy
jak to będzie działać. A teraz to wszystko.
Dzięki za uwagę.