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.
Czym jest boolean?
Boolean to funkcja, która pozwala nam na przykład łączyć ze sobą dwa obiekty
albo przecinać ze sobą dwa obiekty.
Myślę, że możemy to zrobić na podstawie śrubki.
Mam tutaj cylinder, który stworzyłem w poprzedniej lekcji.
Teraz wybiorę ikonkę plusa i znowu możemy wybrać sobie cylinder.
Dodamy tutaj kolejny cylinder.
W porządku, przybliżę się tutaj.
Może zmienię jego kolor na troszeczkę inny i na przykład.
Cornerside ustawię na 1 albo na 2, a sam narożnik zaokrąglimy na 2.
Ok. No i teraz ustawimy sobie na 6 6 boków.
Dokładnie. O tyle mi chodzi.
Następnie cały obiekt sobie Zmniejszę.
Wyśrodkuję te dwa obiekty, jeszcze troszkę go zmniejszymy.
Ok.
I teraz zatopimy go troszkę wewnątrz tego szarego cylindra.
Ten szary cylinder może też jakoś przekolorujemy.
Na razie zaznaczam z shiftem oba te obiekty, a następnie przechodzę
znowu do prawego panelu.
Wracam tutaj i mam boolean modifier.
Czyli kolejny modyfikator.
Mam tutaj trzy operacje.
Przede wszystkim mogę wybrać sobie tutaj operację, która pozwala
na wycięcie w tym białym cylindrze obszaru z pomocą kształtu fioletowego cylindra.
I jest to w zasadzie efekt już śrubki.
Tak, dokładnie o to mi chodziło.
Te dwa obiekty zostały zgrupowane w grupę, która z automatu uzyskała nazwę Boolean.
Ale możemy oczywiście tutaj przejść znowu do prawego panelu i do
sekcji Boolean modifier wybraliśmy pierwszą opcję, która nazywała
się Substruction, ale możemy na przykład wybrać sobie
Intersection, co pozwoli nam na ukazanie się tylko tego obszaru, w
którym obiekty się nakładają ze sobą.
Ewentualnie możemy wybrać sobie Union, czyli połączenie tych obiektów.
Jeżeli wybierzemy sobie na przykład którąkolwiek z tych opcji, na przykład
zostańmy przy Union, możemy wybrać sobie Apply and Edit.
Wtedy te obiekty zostaną sklejone w jeden mesh w jedną siatkę.
Następnie od razu przechodzimy do trybu edycji, gdzie możemy manipulować
wszystkimi vertexami, akami i ścianami naszego obiektu.
Wybierzmy CommandSet.
Jeżeli cały czas mamy tutaj tą grupę boolean, możemy wybrać sobie
którąkolwiek z tych operacji.
Na przykład wybierzmy sobie subtraction.
I znowu możemy zaznaczać niezależnie te dwa obiekty i zmieniać ich pozycję, co
oczywiście wpłynie na to, jak finalnie będzie wyglądał ten efekt.
Zaznaczę sobie teraz ten mniejszy cylinder i na przykład mogę go
troszeczkę wyciągnąć do góry.
I teraz nasza śrubka wygląda w ten sposób.
Okej, wygląda to całkiem fajnie.
Może troszeczkę sobie ten obiekt zatopimy tutaj i przeniesiemy niżej.
Możemy sobie z tego zrobić komponent.
To nazwiemy sobie śrubka.
A następnie wybierzmy prawy klawisz myszy Create component.
Ten komponent sobie naturalnie zduplikujemy wybierając Command D.
Tworząc instancję.
Przeniesiemy sobie tą instancję tutaj.
Znowu wybierzmy Command D.
I kolejną.
Możemy sobie przenieść tutaj.
I raz jeszcze Command D.
I kolejną instancję dajemy tutaj.
Ok.
W ten sposób uzyskaliśmy bardzo fajne śrubki.
Ale oczywiście to nie wszystko co chciałbym tutaj zrobić.
Wykorzystując efekt boolean chciałbym tutaj stworzyć takie wcięcie na
te klawisze w tym szarym obiekcie, dlatego wybiorę command D, Skopiuję sobie ten
obiekt, troszeczkę go wyciągnę do góry, a następnie ustawię sobie
widok w ten sposób.
Kolor na razie może zmienimy na jakiś ciemnoniebieski.
Następnie przejdę do sekcji Shape i tutaj troszeczkę sobie obiekt zmniejszę, tak
żeby dopasować go mniej więcej do klawiszy.
Zmniejszmy jeszcze zaokrąglenie narożników, Corner ustawiamy na 13.
Jeszcze troszeczkę. Może zmniejszymy ten obiekt po osi Y.
Ok.
No i teraz zatopimy sobie ten obiekt tutaj, a następnie zaznaczę z Shiftem
oba te obiekty i znowu wybiorę.
I znowu wybiorę pierwszą opcję z tego boolean.
No i oczywiście udało nam się stworzyć takie fajne wtopienie.
Tutaj oczywiście możemy sobie zaznaczyć ten obiekt, następnie ten,
który jest w środku.
Możemy sobie troszeczkę powiększyć, co oczywiście wpłynie na
zwiększenie tego otworu.
O i teraz ładnie te klawisze są tutaj fajnie zatopione.
Bardzo ładnie to wygląda.
Ok, ale to nie wszystko.
Znowu myślę, że możemy sobie zrobić jakiś port tutaj, na przykład do
podłączenia jakiegoś przewodu.
Możemy to zrobić na przykład z tej strony, czyli wybierzemy sobie tym
razem Cube'a, czyli kostkę.
Ustawimy sobie tę kostkę na przykład tutaj.
Przenieśmy się tutaj na widok z profilu i co zrobimy z tą kostką?
Troszeczkę ją rozszerzymy, spłaszczymy delikatnie.
To zaokrąglenie może troszeczkę jest za duże.
Corner Side nie jest potrzebny nam aż taki duży.
Przypominam, że im większa wartość Cornerside, tym to zaokrąglenie
jest bardziej wygładzone.
Więc ustawmy sobie może na 3 ten obiekt, dajmy sobie gdzieś tu może
troszeczkę go jeszcze spłaszczymy.
Wydłużmy go jeszcze.
On chyba jest moim zdaniem jeszcze.
Za mały.
Okej, teraz zrobimy go sobie tutaj z Shiftem.
Zaznaczamy ten czarny obiekt i znowu wybieram tą operację z bólem
i mamy takie fajne wcięcie.
Co teraz zrobimy?
Myślę, że możemy sobie teraz znowu wybrać kolejny Cube tutaj.
Myślę, że teraz znowu możemy sobie wybrać kolejny Cube tutaj.
Ok, przenieśmy się tutaj do widoku z boku i stworzymy sobie taką pastylkę.
I tą pastylkę myślę, że zatopimy sobie tam w środku.
O.
Wiemy chyba wszystko już o efekcie Boolean, co na co nam pozwala.
A teraz to wszystko w tej lekcji.
Myślę, że możemy śmiało przejść dalej.
Dodamy sobie jakieś ciekawe materiały do naszych elementów.
Teraz to wszystko. Zapraszam Cię na przerwę.