Spline 3D: Projektowania Body modelu
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.
Witam Cię po przerwie.
Ja już podmieniłem wszystkie bitmapki i wygląda to w ten sposób.
Jest jeszcze jedna rzecz, którą zrobiłem w trakcie przerwy.
Mianowicie poprawiłem troszeczkę interakcje.
Zaraz zobaczysz w jaki sposób.
W momencie kiedy klikam wielokrotnie na jeden guzik, na przykład na ten.
No to widzimy, że reaguje to całkiem fajnie.
Jeżeli ja wybiorę sobie tutaj nasz komponent i rozwinę jego zawartość,
następnie przejdę do.
Kick caps to mamy tutaj nasze eventy.
Przy Mousedown mamy transition, który przechodzi w kliknięcie.
Tutaj wcześniej było ustawione 0,310 i w tym przypadku jeżeli ja sobie
kliknę kilka razy na ten sam guzik.
To widzimy, że dźwięk się powtarza, ale guzik wciska się dopiero po momencie,
kiedy wróci na swoją pozycję.
Czyli troszkę trwa to za długo i ten guzik wtedy nie nadąża nad moimi kliknięciami.
Dlatego ten powrót do pozycji wyjściowej należy skrócić
do 5 setnych sekundy i teraz.
Działa to rewelacyjnie.
No dobrze, to to mamy za sobą.
Teraz jest część, która będzie dotyczyła projektowania, bo od tej klawiatury.
Czy mam na to jakiś pomysł?
Coś mi się tam w głowie urodziło na szybko i spróbujemy wykonać sobie
teraz takie body klawiatury.
Gdzieś tutaj jeszcze przewidziałem takie miejsce na jakiś panel dotykowy,
jakiś wyświetlacz przy tej klawiaturze.
Zobaczymy jak to będzie wyglądać, na ile to zda egzamin.
Oczywiście możemy sobie włączyć ambient Shadows i widzimy teraz
zdecydowaną różnicę.
Teraz po prostu obiekty wzajemnie rzucają na siebie cień, dlatego
jest to bardziej realistyczne i w trybie podglądu też.
To fajnie, bardzo fajnie pracuje i wygląda.
Muszę przyznać, że bardzo satysfakcjonujący jest ten efekt hover.
I teraz to co możemy zrobić to na przykład
zaznaczyć sobie wszystkie te nasze elementy i je po prostu
zgrupować wybierając command g.
Zwijamy sobie tą grupę tutaj dorzucimy jeszcze do niej te dwa elementy.
Okej?
I tą grupę możemy nazwać po prostu Keys.
Albo Buttons. Czy dowolnie jest to teraz duża grupa.
To nie przeszkadza, żeby działały tutaj interakcje, bo one cały czas są
jak najbardziej zachowane.
Po prostu zamknąłem sobie to w osobnej grupie, którą mogę sobie teraz zablokować
za pomocą ikonki kłódki, a następnie będę chciał po prostu zbudować sobie
jakieś body body do tej klawiatury stworzymy w zasadzie w
bardzo prosty sposób.
Chciałbym, żeby to był, żeby to była minimalistyczna klawiatura, raczej
niskoprofilowa niż jakaś taka super turbo gamingowa.
Dlatego mamy tutaj takie narzędzie, które nazywa się Reaktangle i ja ustawię sobie
ten obiekt tutaj w tym miejscu, a następnie przeniosę się do widoku od góry.
I teraz korzystając z sekcji Shape w panelu Właściwości, po prostu
zwiększ rozmiar tego obiektu.
No tak, żeby gdzieś tam on się nam bardziej dopasował.
Na pewno zaokrągla mu narożniki w ten sposób.
I teraz przenieśmy sobie ten obiekt pod naszą klawiaturę.
Ok, znowu wybierzmy sobie widok od góry.
Następnie dopasujmy mniej więcej tak.
Tutaj zostawiam puste pole, ponieważ chciałbym, żeby w tym miejscu znalazł się
jakiś panel dotykowy, jakiś wyświetlacz, Więc na razie niech to tak.
Niech to tak zostanie.
Co robimy dalej z tym płaskim, dwuwymiarowym obiektem?
Po prostu go exstrudujemy wybierając Extrusion.
Możemy uzyskać coś takiego.
Troszeczkę zatopimy sobie te klawisze, później wytniemy tutaj taki otwór w tym
naszym obiekcie, w tym naszym obiekcie właśnie na te
klawisze, Ale to zrobimy później, Jeszcze troszeczkę sobie
zwiększę szerokość tego obiektu.
Ok, może to ekstrużyn troszeczkę sobie zmniejszymy i sam obiekt
podniesiemy do góry. Ok.
No i teraz mamy coś takiego.
To co jeszcze możemy zrobić to oczywiście wybrać sobie tutaj opcję Bevel po to, żeby
zaokrąglić troszeczkę narożniki, ponieważ musimy pamiętać, że w przyrodzie nie ma
żadnego obiektu, który jest idealnie kanciasty.
Jeżeli zachowamy tutaj taki kant, no to jakby oko nasze to wyłapie i będzie
ten obiekt będzie wyglądał sztucznie.
Dlatego zadbajmy chociażby o minimalny tutaj taki efekt.
Ok.
Mamy już pierwszy obiekt naszego body zrobiony.
Myślę, że możemy sobie skopiować to wybierając command D.
Przesuńmy sobie to niżej na przykład tak.
Następnie ustawmy się od góry i troszeczkę sobie powiększymy ten obiekt w ten sposób.
I jeszcze wzdłuż osi Y.
Ale byłoby fajnie, Gdybyśmy jednocześnie też powiększyli to zaokrąglenie.
Więc przechodzę do Corneri.
Troszeczkę tutaj zwiększam w ten sposób.
Okej, teraz zwiększmy sobie Extrusion tak, aby dojechać z tym tutaj.
Do góry. Ok.
Co teraz robię?
Wybieram Command znowu i przesuwam sobie ten obiekt niżej.
Ekstruction możemy zmniejszyć, ale sam obiekt podnieśmy sobie tutaj.
O i w ten sposób uzyskaliśmy bardzo proste elementy.
To jeszcze możemy sobie podnieść tutaj wyżej.
O i teraz ładnie jest to wszystko dopasowane.
Później dodamy sobie jeszcze tutaj jakieś śrubki, jakieś elementy w postaci na
przykład jakichś złączy na przewód czy coś w tym stylu.
Tutaj, jak wspomniałem, chciałbym, żeby pojawił się jakiś panel dotykowy,
dlatego myślę, że możemy wybrać Command D.
Znowu podnieśmy to do góry.
No i oczywiście sobie troszeczkę zmniejszymy.
Korzystam tutaj znowu z sekcji Shape w panelu z właściwościami.
Naturalnie sobie to zmniejszymy również po osi Y i przesuńmy sobie to tutaj.
Stworzył nam się taki mały iPhone z tego, więc troszeczkę sobie
jeszcze to zmniejszymy.
Corner na pewno też musimy zmniejszyć i ustawmy to może w ten sposób.
Jest to za wysokie, więc na pewno sobie zmniejszymy.
Mniej więcej tak.
I wygląda to całkiem, całkiem fajnie.
Jak wspomniałem, byłoby super, gdybyśmy też mieli tutaj jakieś śrubki.
Dlatego na razie dodam sobie tylko tutaj jakiś element, żeby to kupować,
żeby sobie te śrubki zamo kapować. Będzie to cylinder.
Dodamy go sobie tutaj.
Jest on naturalnie za duży, więc możemy go sobie tutaj z shiftem zmniejszyć.
Na pewno będzie fajnie, jeżeli po osi Y też sobie go zmniejszymy i według
mnie jak na śrubkę jest on dosyć mocno zaokrąglony.
Dlatego corner side zmniejszymy sobie do 2, a sam corner na przykład do 1.
No i teraz będzie z tego fajna baza pod zbudowanie jakiegoś rodzaju śrubki,
chociaż o Myślę, że tutaj ta pozycja jest jak najbardziej w porządku.
Obiekty Rectangle mają jedną cechę wspólną i można traktować to jako minus.
Nie mamy tutaj nigdzie przycisku smooth and edit.
Mamy dwa przyciski Edit i convert to path, ale edit to po prostu
taki tryb, w którym możemy chwytać i przeciągać te elementy, tworząc, po prostu
zmieniając po prostu kształt tego prostokąta, który już po
prostu prostokątem nie jest.
Natomiast mamy jeszcze Convert to Path, co sprawi, że obrys naszego obiektu
zostanie zamieniony na ścieżkę, czyli obiekt jakim z jakim pracowaliśmy budując
usta naszej ryby w poprzednim rozdziale.
Dlatego wybierzmy Command Set.
I teraz spróbujemy dodać tutaj jeszcze pewien element, który posłuży nam jako
swego rodzaju pokrętła tutaj, na tym ekranie.
Tu będzie jakiś panel dotykowy, a tutaj chciałbym, żeby były 2 pokrętła na
przykład do pogłaszania czy zwiększania jasności ekranu.
Wybierzmy teraz + na klawiaturze i to co mnie interesuje to
narzędzie ster obiekt Star.
Dodajemy tutaj gwiazdkę, możemy sobie ją podnieść i widzimy, że jest to
zwykła pięcioramienna gwiazdka.
Natomiast zwiększymy tutaj liczbę tych ramion do maksimum, w tym przypadku 16.
Następnie powiększymy samą gwiazdę, na przykład powiedzmy 66 dla X i Y.
Następnie InR.
Możemy sobie tutaj zwiększyć mniej więcej w ten sposób.
Możemy sobie wyeksprudować ten obiekt.
Ok, to co tutaj zrobimy jeszcze?
Na pewno chciałbym zastosować tutaj tą funkcję Bevel, tak żeby troszeczkę
zaokrąglić tutaj te obrzeża Bevel size.
Możemy ustawić na dwa, żeby mieć to bardzo ładnie wygładzone i to co jeszcze mi się
tutaj nie podoba, to zbyt kanciaste te ramiona tej gwiazdy, Więc możemy przejść
do Corner i tutaj ustawić na przykład na powiedzmy 3.
No i w ten sposób uzyskaliśmy bardzo ładne pokrętło.
To jest dokładnie obiekt, który działa tak samo jak prostokąt, czyli nie mamy
tutaj smooth and edit, nie mamy tego trybu, w
którym możemy dowolnie modelować każdy edge, każdy, każdy vertex i każdą
płaszczyznę, każdą ścianę tego obiektu.
Niestety jest to moim zdaniem troszeczkę minus, bo przypuśćmy, że chciałbym tutaj
sobie coś wyeksprudować czy dodać jakąś dodatkową płaszczyznę gdzieś tutaj u góry.
No nie mamy czegoś takiego niestety, więc musimy jakoś sobie z tym poradzić.
Ja teraz ten obiekt po prostu przeniosę sobie tutaj niżej, na
przykład w ten sposób.
Wygląda fajnie, może troszeczkę jest za duży, więc możemy sobie tutaj chwycić za
tą kulkę i z shiftem proporcjonalnie sobie zmniejszyć.
Command Możemy sobie tutaj stworzyć kopię tego.
Okej.
No i przydałoby się coś pod spodem, czyli wybierzmy sobie może plus.
Następnie wybierzemy sobie cylinder.
Ustawmy sobie cylinder tutaj W tym miejscu przenieśmy się na widok od
góry mamy Snap Settings.
Ustawione to na Object, więc możemy sobie ładnie to tutaj wyśrodkować.
Okej, powiększymy sobie to ładnie.
61 Może będzie w porządku.
Jeśli chodzi o boki, to może ustawmy sobie tutaj 32.
Następnie Cornerside ustawimy na 3 i sam corner np.
Na 1, a następnie spłaszczymy to troszeczkę i dołożymy sobie tu.
Jeszcze troszeczkę, może zjedziemy z wartości Y.
OK sam sobie podniesiemy i mamy coś takiego.
To, że nie mamy tutaj trybu smooth to nie znaczy, że nie jest to obiekt
trójwymiarowy, który składa się z vertex ów, edge i płaszczyzn.
Bo kiedy mam zaznaczony ten, ten obiekt, tą gwiazdę albo np.
Jeden z tych kwadratów, to możemy przejść tutaj niżej i przy
visibility włączyć sobie wireframe.
W tym przypadku jest to obiekt bardzo gęsty, więc może wybierzmy sobie hit.
Ale jeżeli zaznaczymy sobie na przykład.
Ten angle i wybierzemy sobie tutaj visibility.
Przy.
Wireframe nasz show, no to widzimy dosyć gęstą siatkę tutaj Edge i RTXów.
Okej, wybierzmy height.
Te dwa obiekty sobie zduplikujemy. Command the.
Przenieśmy je sobie na przykład. Tu.
Zaznaczymy.
Zaznaczmy wszystkie 4 i ustawmy w ten sposób.
No i okej.
Mamy całkiem przyjemną klawiaturkę z bardzo fajnym body.
Oczywiście to nie wszystko, co tutaj zrobimy.
Przejdziemy teraz do lekcji następnej, w której popracujemy nad efektem Boolean.
Czym jest Effect Boolean?
Dowiesz się po przerwie.
A teraz to wszystko. Dzięki za uwagę.