Spline 3D: Rzeźbienie
Interaktywne Sceny 3D w Webflow
2 godz. 30 min · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Poznanie interfejsu Spline
- Nauka poruszania się po narzędziach
- Tworzenie predefiniowanych obiektów
- Praca z polygonami oraz modyfikatorem Subdivision
- Modelowanie customowych kształtów
- Tworzenie rozbudowanych materiałów
- Dodawanie tekstur i oświetlenia
- Projektowania zdarzeń i animacji
- Zaawansowane interakcje w Spline
- Budowanie stanów obiektów i zarządzenie nimi
- Opcje eksportu
- Wdrażanie scen 3D w projektach Webflow
Czym jest Spline
Spline 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.
Przewaga rynkowa dzięki Spline
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.
Co w kursie
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.
Interfejs i modelowanie
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.
Interakcje i wdrażanie
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.
Dla kogo jest ten kurs?
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.
No dobra, to może teraz zajmijmy się tak zwanym rzeźbieniem i myślę, że
możemy zacząć od ogona naszej rybki.
Chciałbym, żeby nie był on aż tak bardzo regularny i chciałbym, żeby był
troszkę bardziej pofałdowany.
I jak możemy sobie z tym poradzić?
Przejdziemy klikając dwukrotnie do trybu edycji.
I mamy tutaj jeszcze taką ikonkę z pędzelkiem.
Klikając na tą ikonkę przechodzimy do rzeźbienia.
Możemy rzeźbić sobie w kształcie trójwymiarowym w naszych
szatach, natomiast im bardziej złożony jest nasz
kształt, tym lepsze rezultaty daje rzeźbienie.
Co to znaczy bardziej złożony?
To znaczy mam na myśli taki obiekt 3D, który składa się z
większej ilości poligonów.
Jeżeli wejdziemy sobie z trybu rzeźbienia, no to widzimy, że tutaj tych poligonów
na tym ogonie jest dosyć mało.
@Overtexów mało płaszczyzn, mało krawędzi, ale jeżeli przejdziemy do modyfikatora
Subdivision i wybierzemy Increase Base subdivision.
No to teraz ten nasz obiekt jest zbudowany z dużo większej liczby poligonów, tak?
Możemy znowu dodać sobie modyfikator Subdivision,
żeby wygładzić troszkę ten obiekt, ale już mamy większe pole do manewru, jeśli chcemy
dodać tutaj jakiekolwiek rzeźbienie.
Dlatego proponuję, żebyśmy wybrali sobie teraz sculpt, czyli rzeźbienie i możemy na
przykład wybrać sobie narzędzie Grab, które jest bardzo fajnym narzędziem i
pozwoli nam ono na takie fajne wykrzywianie tego naszego obiektu.
O, na przykład w ten sposób.
I teraz ta nasza płetwa, ten ogon staje się bardziej nieregularny, prawda?
Wygląda całkiem fajnie.
Możemy sobie jeszcze gdzieś tutaj go wyciągnąć?
O, super!
Żeby to było bardziej wygładzone, no to naturalnie Subdivision Modifier w górę
I teraz wygląda całkiem fajnie.
Co dalej?
Proponuję, żebyśmy wyszli teraz z tego trybu.
Przejdziemy do tej górnej płetwy.
I tutaj zrobimy to samo.
Klikam dwukrotnie, wybieram Increase Base subdivision.
Mamy całkiem sporo poligonów, dlatego będzie nam się fajnie rzeźbić.
Zwiększmy sobie Subdivision Modifier do 2 na przykład.
I wybieram sobie tryb rzeźbienia.
Pracowaliśmy z pędzlem Grab.
Mamy pędzel draw, czyli pędzel, którym możemy sobie tutaj rysować w jakiś sposób.
Dodając swego rodzaju właśnie takie fajne.
Nierówności.
Ale możemy też zwiększyć siłę takiego pędzla i radius, czyli jego rozmiar.
Ok, przejdźmy z drugiej strony.
Mamy też pędzel, który nazywa się Draw Clay, czyli jest to pędzel, który będzie
nam troszeczkę tutaj nadbudowywał takich obszarów.
Widzimy jak fajnie to się teraz układa.
O.
Zróbmy może to samo tutaj, z tej strony.
I pędzel, który nazywa się Smooth.
Czyli pędzel, który wygładza nam nierówności.
Ale w tym przypadku ja chyba chciałbym je zachować, więc myślę, że będzie
fajnie, jeśli one tu zostaną.
Ok, przejdźmy sobie teraz tutaj od góry.
Wybierzmy sobie mój ulubiony pędzel, czyli grab
I troszeczkę sobie tutaj zmodyfikujemy tą górną płetwę w ten sposób.
Ok. Wygląda całkiem fajnie.
Możemy sobie wyłączyć Subdivision Modifier.
Widzimy jak wygląda teraz struktura naszego obiektu bez tego modyfikatora,
ale myślę, że będzie lepiej, jeśli go sobie włączymy do dwóch
escape albo klikamy dwukrotnie gdzieś poza naszym obiektem.
No i teraz nasza ryba wygląda w ten sposób.
Myślę, że dużo ciekawiej.
No dobra, myślę, że model mamy gotowy.
Ja teraz chciałbym, abyśmy zajęli się jego animacją i interakcją.
Chciałbym, żeby to w jakiś sposób się ruszało i żeby użytkownik mógł
wejść w interakcję z tym modelem.
Dlatego na teraz to już wszystko w tej lekcji.
Słyszymy się za chwilę.