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.
Hej, cześć, Witam Cię w kolejnej lekcji.
Przyszedł już czas na materiały do naszej klawiatury, więc myślę, że
możemy zacząć od klawiszy, bo są one fajne, takie mleczne, ale wyglądają
troszeczkę plastikowo i czy możemy coś z tym zrobić?
Zaznaczmy sobie nasz główny komponent i tutaj mamy Key Shape.
Czyli kształt 3D odpowiadający za wygląd tego klawisza, za jego geometrię.
I dodamy sobie tutaj jeszcze jedną warstwę.
Widzimy, że dodałem kolor szary, czyli domyślnie zawsze gdy dodaję warstwę dodaje
się automatycznie warstwa o nazwie kolor. Jest ona szara.
Widzimy, że zostało to dorzucone do wszystkich pozostałych instancji i jest to
kolejny dowód na to, że korzystanie z komponentów I instancji jest bardzo
wygodne, ponieważ za jednym kliknięciem możemy zmodyfikować
materiały w pozostałych obiektach pozostałych instancjach.
Ja tutaj ten kolor sobie rozwinę i konkretnie zamienię go na image
i zrobimy to, co już robiliśmy.
W zasadzie klikam tutaj, a następnie zjeżdżam tutaj na dół i wykorzystamy
jedną z tych wbudowanych bitmap.
Mianowicie na przykład ten może tą trawę.
Nie będziemy tutaj nic ładować nowego, ale widzimy, że nic tutaj nie ma.
Ta tekstura się tutaj ładnie nie układa. Dlaczego?
Projection czyli wyświetlanie ustawimy na trip Lunar i teraz
chyba wygląda to lepiej.
Następnie nie chciałbym, żeby klawisze w ten sposób wyglądały, więc tą warstwę z
obrazem po prostu wyłączę i przejdę do warstwy Lighting.
A następnie Bumpmap ustawię na nasz obraz z trawą.
No i widzimy, że teraz te klawisze zyskały taką strukturę, ale ona jest oczywiście za
mocna, dlatego Intensity ustawimy na 0,5.
Myślę, że będzie lepiej.
No i teraz faktycznie chyba fajnie te klawisze wyglądają.
To samo jeśli chodzi o.
Kolejny tutaj komponent, czyli Black Key mamy tutaj.
Tak, to jest ten obiekt.
Jest on zbudowany oczywiście z takich samych grup, tylko że mamy inny materiał,
a mianowicie czarny, no i inną geometrię tego obiektu.
Tak, jest on szerszy niż te białe przyciski.
No i zrobimy tutaj to samo, czyli dodamy sobie nową warstwę do materiału.
Nie chcę, żeby to był kolor, tylko obraz.
Rozwiniemy tutaj sobie listę.
Możemy oczywiście wybrać upload i załadować sobie własną bitmapę,
natomiast ja wybiorę sobie tą tutaj trawę.
Ona też nie jest dobrze wyświetlana, więc projection ustawimy na plener,
nie będziemy jej skalować.
Myślę, że ten rozmiar jest w porządku, więc teraz to co musimy zrobić to po
prostu przechodzimy do Lighting Bump Map ustawiamy na Image, a następnie
Intensity zmniejszamy na taką samą wartość, czyli 0,5, Ale samą warstwę
z obrazem musimy wyłączyć z podglądu.
No i teraz mamy.
Całkiem fajne klawisze. Moim zdaniem.
Możemy sobie wejść tutaj w podgląd.
I działają one całkiem fajnie.
Oczywiście wszystko jest zachowane, mamy tylko bardzo
ładną tutaj strukturę tych klawiszy i myślę, że wygląda to teraz
dużo bardziej realistycznie.
Okej, co teraz?
Chciałbym, żebyśmy skupili się też na pozostałych elementach.
Mamy tutaj też nasze śruby, które tutaj zaznaczymy sobie główny komponent,
ponieważ mamy jeszcze trzy instancje, które to śruby chciałbym, żeby były
takie metaliczne, może jakieś złote.
Dlatego przejdziemy tutaj do material i kolor przestawię na
matcap albo ewentualnie.
No i rozwinę tutaj tą listę z bitmapami.
Mamy tutaj jakiś kolor złoty nawet fajnie wygląda.
Myślę, że możemy to tak zostawić.
Ewentualnie jeśli korzystamy z płatnej wersji split możemy przejść do Material
wybierając tutaj te 4 kropki i mamy material assets,
czyli nasze własne assety.
Ja tutaj nie użyłem żadnych assetów, więc tutaj jest pusto, ale możemy skorzystać
ze Split Library i mamy na przykład metal.
Transparent Concrete, czyli coś betonowego Stone Bricks Wood i tak dalej.
Fabric, czyli jakieś płótno, Nature i tak dalej, więc mamy tutaj w czym wybierać.
No ja chciałbym, żeby tutaj, żebyśmy wybrali metal i na przykład możemy
sobie wybrać coś takiego, chociaż.
to troszeczkę jest chyba za ciemne, za mało kontrastowe.
Więc może wybierzmy sobie tutaj gold metal.
O, chyba wygląda fajnie.
Przejdźmy dalej.
Zastanówmy się jeszcze, jakie kolory tutaj chcielibyśmy uskutecznić.
Myślę, że jeśli chodzi o ten obiekt, tutaj wybierzemy sobie może kolor biały,
chociaż nie wiem czy to dobrze wygląda.
Wtedy troszeczkę nam się zlewają te klawisze z tą obwódką.
A co gdybyśmy wybrali sobie na przykład.
Kolor jakiś pomarańczowy bardziej.
Wtedy to wygląda troszeczkę zbyt dziecinnie, prawda?
Kolor czarny troszeczkę lepiej.
A spróbujmy wybrać sobie zamiast kolor wybierzmy sobie Glass I też moim zdaniem
wygląda to całkiem, całkiem ciekawie.
Ale chyba to szkło wygląda ciekawie, ale no jest takie plastikowe i ogólnie wygląda
to jakby się miało zaraz połamać, więc może zastosujemy tutaj kolor biały, więc
może zastosujemy tutaj kolor biały, ale ten sam co na klawiszach,
więc zaznaczam sobie tutaj nasz komponent.
I mamy tutaj Keyshape.
Mamy nasz materiał i ja chciałbym ten materiał zapisać w assetach, więc wybieram
tutaj te cztery kropki, a następnie wybieram ikonkę z plusem.
Nazwiemy sobie to Key Caps Material.
Ok.
I do tego elementu dorzucimy sobie właśnie ten materiał.
Zobaczymy jak on się będzie układał i myślę, że wygląda całkiem fajnie.
Chyba tutaj pasuje moim zdaniem.
Bardzo fajną mamy tą strukturę i myślę, że powinniśmy iść za ciosem
i to samo również zrobić tutaj.
Może dodamy sobie ten sam materiał co jest na tych, który jest na tych czarnych
klawiszach, ale to za chwilę sprawdzimy jak on będzie tu wyglądał.
To samo możemy zrobić tutaj.
Czyli mamy nasz Black Key.
Zobaczmy co tutaj mamy niżej.
Oczywiście Keyshape to jest ten obiekt, który determinuje kształt klawisza.
I znowu możemy wybrać sobie tutaj cztery kropki, aby dodać nasz materiał do
assetów i nazwiemy sobie to Blackkey Caps.
W porządku, zaznaczymy sobie ten obiekt.
Wybieram bibliotekę Material Assets i wybieram Black Caps.
Ok, wygląda fajnie, ale mam tutaj efekt fresnel, który troszeczkę chyba psuje
całość, dlatego ja z tego Fresnela bym zrezygnował.
Dlatego mamy tutaj w zasadzie dwie możliwości albo lokalnie dla tylko
dla tego obiektu wyłączymy efekt fresnel, albo dla wszystkich
tych czarnych klawiszy.
Jeżeli zrobimy to tutaj na poziomie Material Assets, gdzie mogę sobie tutaj
fresnel wyłączyć, no to zobaczymy, że on wyłączy się
wszędzie na wszystkich obiektach, które które mają przypisany ten,
ten material asset.
I może nie wygląda to źle, chociaż zastanawiam się, czy nie jest za ciemno.
Ale efekt jest chyba całkiem fajny.
Możemy oczywiście wrócić do tego efektu fresnel, ale z pewnymi zmianami.
Włączmy go sobie z powrotem.
Następnie klikam w tym miejscu i na przykład możemy
zmniejszyć skalę tego efektu.
Zmniejszyć jego intensywność albo ewentualnie zmienić tryb
mieszania, na przykład na overlay.
Overlay wygląda fajnie, ale możemy na przykład zwiększyć sobie tutaj ten bias
tak, żeby troszeczkę odzyskać tego światła.
Tutaj widzimy, że troszeczkę nam to światło wraca.
Co do tego czarnego materiału ja mam jeszcze kilka uwag.
Mianowicie troszeczkę za bardzo się błyszczy i może jednak ta
chropowatość jest zbyt intensywna.
Dlatego przejdziemy sobie do Material Assets.
W momencie, kiedy nic nie jest zaznaczone, wszystkie te assety mamy tutaj po prawej
stronie zarówno image assets, jak i color assets, bo kolory też
możemy dodawać do assetów.
Ja kliknę tutaj na ten Black Key Caps i myślę, że ten efekt
bumpmap sobie troszeczkę zmniejszymy, na przykład wpisując tutaj 0,2 i matcap.
Tutaj myślę, że wybierzemy sobie troszeczkę mniej błyszczący, mniej
błyszczącą teksturę ze Split Library na przykład taką O, i teraz moim zdaniem.
Wygląda to już nie tak inwazyjnie.
I moim zdaniem jest całkiem ok.
Mamy zachowaną fajną strukturę i ja myślę, że w ten sposób.
Tutaj możemy to zostawić.
Ok, teraz ten pomarańczowy obiekt.
Tutaj w zasadzie tak.
Kolor chciałbym zostawić ten, który jest, czyli taki pomarańcz.
I jedna rzecz, która tutaj mi nie odpowiada to fakt, że to jest płaskie.
Zazwyczaj klawiatury są nieco pochylone pod pewnym kątem,
nawet takie niskoprofilowe.
Magic Keyboard też są, mimo że dosyć płaskie, to są pochylone i
chciałbym troszeczkę tutaj uzyskać w tym miejscu taki delikatny skos.
Tutaj schodzący w dół w tym miejscu.
Jako, że ten obiekt zbudowany jest z narzędzia reaktangle,
to nie ma możliwości.
Tak jak wspomniałem w dwie lekcje temu nie ma możliwości wejść w tryb Smooth edit i
tutaj poprzesuwać poszczególnych RTX'ów.
Dlatego myślę, że możemy sobie odtworzyć ten obiekt, ale na przykład z
innego obiektu to sobie usuńmy.
Dodamy teraz Cube, który wrzucimy sobie tutaj.
Możemy go dać na samą górę i na pewno chciałbym, żebyśmy
zlikwidowali mu ostre narożniki.
Przejdźmy teraz na widok od góry I będę chciał tutaj, żebyśmy mocno
zwiększyli rozmiar tego elementu, tak żeby dopasować go do tego czarnego
fragmentu body naszej klawiatury.
Ok, tutaj też powinniśmy to zwiększyć w ten sposób.
Jeszcze troszkę.
Jeśli chodzi o grubość tego obiektu, to po osi Z troszeczkę go
spłaszczymy w ten sposób.
Może jeszcze troszkę.
No ok. No i teraz przechodzimy do słów and edit.
Mamy włączony Subdivision Modifier, który troszeczkę nam tutaj zepsuł plany,
ale sobie z tym poradzimy, oczywiście.
Najpierw chciałbym znowu przełączyć się na widok od góry.
I dodamy sobie lokaty, czyli Edge dookoła 1 na przykład.
W tym miejscu.
Drugi tutaj, przy czym przeciągniemy go w ten sposób, żeby tutaj.
Uzyskać takie zaokrąglenie podobny do tego.
To samo zrobimy w tym miejscu.
Też sobie przeciągniemy to tutaj, żeby uzyskać podobne zaokrąglenie.
Ono nie będzie w tym momencie takie same. Ale to za chwilę.
Teraz kolejne odcięcie.
Tutaj kolejne tu i i też ją sobie przesuniemy.
W tę stronę.
W porządku.
I jeszcze jedno tu.
Też przesuwamy.
Tutaj możemy sobie ten Subdivision Modifier troszkę zwiększyć.
Okej.
No i teraz wygląda to tak.
Jeszcze nie jest to to, co chcieliśmy uzyskać.
Znowu wybierzemy sobie lookout.
I tym razem dodamy sobie Edge po obwodzie całego obiektu.
I musimy to oczywiście podnieść tutaj, żeby nie mieć aż tak ostrego tutaj.
Aby nie mieć tutaj aż tak bardzo zaokrąglonego narożnika.
Ok, no i to samo zróbmy tu.
W porządku.
Mamy nowy obiekt.
Teraz przełączę się na widok z boku.
Następnie zaznaczę sobie na przykład RTXY.
Albo może jednak zostaniemy przy tych Edge przy krawędziach.
Wrócimy teraz do trybu zaznaczania.
Mamy przestawiony tryb selekcji side na off, czyli.
Czyli jeżeli będę zaznaczał sobie jakieś elementy po tej stronie, to również
zostaną zaznaczone te, które są z tyłu.
Jeżeli wybiorę front, przypominam, że tutaj zaznaczę tylko te elementy naszego
Shape, naszej siatki, które są widoczne wyłącznie z frontu.
Tryb mam ustawiony na paint, czyli mogę sobie malować tutaj zaznaczając te, które
chcę zaznaczyć, które mnie interesują. Ok.
Ale możemy sobie po prostu wybrać box, który chyba jest najłatwiejszym
trybem zaznaczania.
Przy tym trybie Paint możemy zmniejszyć sobie radius np.
Do 20, żeby zaznaczać sobie mniej mniej krawędzi.
Nie aż tak dużo na raz, ale najbardziej chyba intuicyjnym jest
box, więc przeciągamy sobie te Edge tutaj, a następnie możemy je.
Możemy je podkręcić w tę stronę troszeczkę i może dajmy je niżej, troszkę do przodu.
No i ok, mamy obiekt, który moim zdaniem spełnia nasze oczekiwania.
Możemy przenieść go tutaj niżej.
No i oczywiście powinniśmy mu nadać odpowiedni materiał.
Ja chciałbym, żeby to był kolor pomarańczowy,
taki jak tutaj, niektóre oznaczenia na klawiszach,
więc ustawmy sobie coś takiego.
Może nie aż taki jaskrawy.
Ok, no i chyba chyba tutaj wystarczy.
Tak naprawdę możemy przejść teraz do kolejnych elementów.
Mamy te pokrętła, którym tak naprawdę możemy przypisać ten sam materiał co
naszym klawiszem, więc możemy wybrać Black Caps.
Ok i to samo zróbmy tu.
Black Caps.
Ten efekt Fresnel daje tutaj całkiem fajne wrażenie.
Tutaj, w tym miejscu chciałbym uzyskać coś bardziej metalicznego,
więc może skorzystamy z tego samego materiału co nasze śrubki.
Gold Metal 0.3. Okej, to jest materiał z, która jest dostępna w wersji płatnej.
No i teraz wygląda to tak.
Został nam jeszcze ten panel z wyświetlaczem, panel dotykowy, ale
ogólnie już ta nasza klawiatura zaczęła nabierać kształtów.
No dobra, to wygląda na to, że został nam ten wyświetlacz, ten panel
i damy tutaj może nie tyle kolor czarny, co na pewno matka P.
I tutaj z tych wbudowanych tekstur wybiorę sobie tą.
To da nam taki fajny szklisty połysk tutaj i myślę, że tak to możemy zostawić.
Natomiast fajnie by było, gdyby coś działo się tutaj na tym, na tym ekranie, tak?
Dodamy tutaj warstwę tekstową, dodamy tutaj obiekt tekstowy, wybiorę
więc text, a następnie klikam tutaj.
Mogę coś tutaj wpisać sobie?
Mogę tutaj coś wpisać tutaj w TextContent Mogę wpisać, Nie wiem.
Godzina na przykład.
Następnie jeśli chodzi o font size, no to mogę sobie oczywiście tu
zmniejszyć lub powiększyć, wyśrodkować, zwiększyć lub zmniejszyć spacing.
Mogę załadować sobie swój własny font, czy na przykład wybrać któryś z tych
wbudowanych, na przykład Sans.
Naturalnie powinniśmy to obrócić o 90 stopni z shiftem.
Okej, kolor tutaj tego tego materiału mamy ustawiony ten domyślny, więc
wybierzmy sobie może biały.
No i tak to wygląda.
Natomiast chciałbym, żeby tutaj coś się animowało, żeby ten tekst się animował.
Dlatego proponuję, żebyśmy dodali tutaj zmienną.
I wystarczy, że mamy wszystko odznaczone.
Przechodzimy sobie tutaj do Variables and Data.
Wybierzemy sobie time.
Następnie przechodzimy do ustawień i chciałbym, żeby to był nie timer,
nie Stopwatch tylko clock, czyli zegar.
Format niech będzie Godziny, minuty, sekundy.
Niech to będzie 24 godzinny zegar i strefa czasowa.
Możemy sobie wybrać naszą.
Czy możemy wybrać czy będzie to czas lokalny wtedy.
No i mając taką zmienną tutaj już zaadresowaną możemy sobie ją
wbudować w tą zawartość tekstową naszego obiektu tekstowego.
Czyli zaznaczam nasz obiekt tekstowy.
Następnie kasuje to co mamy tu i widzimy, że tutaj po prawej stronie w
prawym górnym narożniku mam takie kółeczko.
Kiedy najadę pokazuje się tutaj plus i w tym momencie mogę tutaj dodać zmienną i
będzie to nasz time, czyli nasza godzina.
Co możemy z tym zrobić?
Myślę, że możemy to sobie powiększyć w taki sposób, żeby
stworzyły się z tego trzy, trzy wiersze.
Dajmy to troszeczkę wyżej, może zmniejszymy sobie ten font size.
Niech będzie 51.
Cały obiekt możemy sobie zmniejszyć, ewentualnie, jeśli zachodzi taka potrzeba,
możemy sobie to wyśrodkować tutaj.
No i mamy coś takiego, co oczywiście będzie działać,
jeżeli włączymy sobie teraz preview.
No to pokazuje nam aktualną godzinę i ładnie się wszystko tutaj nam odlicza.
Wygląda to całkiem fajnie.
Bardzo fajny gadżet dodany do naszej klawiatury.
No i jeszcze ten obiekt tutaj.
Zastanawiam się nad kolorem.
Może.
Może byłoby dobrze, gdyby był pomarańczowy, chociaż obawiam się, że
wtedy będzie wyglądało to troszeczkę plastikowo, ale może niekoniecznie.
A wybierzmy sobie może tutaj z naszej biblioteki assetów czarny.
No i ok, niech zostanie.
Nie wygląda to źle.
To co teraz możemy zrobić to jeszcze dodać tutaj jakieś proste interakcje,
na przykład do tych pokręteł.
Czyli standardowo dodajemy sobie stany base state oraz state.
Przy tym state.
Może obrócimy sobie to w tę stronę.
I dodamy sobie po prostu event.
Chociaż może zróbmy troszeczkę inaczej.
To będzie hover.
Zrobimy coś takiego jak w naszych klawiszach.
Hover.
I tutaj na rowerze niech się troszeczkę przekręci i dodamy jeszcze 1 To będzie
click i niech nam się przekręci na przykład w tę stronę.
Okej.
No i teraz dodamy sobie tutaj eventy, dodamy sobie mouse hover,
a następnie akcję.
Dodajemy tranzycję i będzie to z base start do hover.
Okej, a następnie tutaj za
ten easying out zmienimy na sprint, tak żeby to ładnie nam zaawansowało.
Czyli będzie to wyglądać tak.
Okej, no i jeszcze dodajemy tutaj jeszcze mousedown, czyli znowu dodajemy jeszcze
jeden event i będzie to Mousedown.
Znowu tranzycja i wybierzemy z current state do click i potem powrót.
Z.
Click do current i niech to trwa.
1 sekundę. Zobaczmy.
Jeszcze mode Ustawmy na repeat i time.
Okej.
Wygląda na to, że działa fajnie.
W porządku, możemy to usunąć, a to sobie po prostu zduplikujemy.
Command de.
No i mamy 2 takie przyciski.
Co dalej?
No i myślę, że teraz możemy sobie zgrupować troszkę elementów.
To na przykład sobie zgrupujemy te cztery elementy command g i to
będą pokrętła na przykład.
W porządku, zróbmy tutaj po prostu porządek z tym wszystkim dalej.
Śrubki też sobie zgrupujemy jako śrubki.
Potem.
To, to oraz to sobie zgrupujemy jako screen, czyli wyświetlacz.
Ok.
No i zostaną nam jeszcze raz dwa, trzy.
I tutaj czwarty obiekt.
Command g i to będzie body naszej klawiatury.
I w ten sposób mamy tutaj zrobiony porządek.
A całość możemy też zgrupować i zamknąć w jednej grupie wybierając Command g
i nazwijmy to.
Mechanical Keyboard.
Wszystko ładnie działa, zegar się wyświetla, pokrętło ładnie działa.
Natomiast podejrzewam, że z tym drugim pokrętłem będziemy mieli problem,
bo jak jest hover to ono przesuwa się tutaj dlatego, że nastanie hover.
Przesunąłem tą kopię pokrętła.
Tak więc proponuję żebyśmy zrobili coś takiego to sobie usuniemy
to sobie usuniemy.
Te dwa elementy sobie zgrupujemy, to będzie pokrętło jeden.
Wybierzmy teraz dopiero Command D jako grupę co zduplikujemy?
Dajmy tu i to będzie pokrętło.
2. I teraz będzie działać.
Bardzo dobrze.
Bardzo fajnie.
Ok, nasz model klawiatury jest gotowy. Jeszcze.
I jeszcze jedna rzecz, a w zasadzie dwie.
Pierwsza jest taka, że odznaczamy wszystko i przechodzimy do prawego panelu.
Mamy tutaj do dyspozycji Background scene i tutaj rozjaśnijmy troszeczkę ten
background na przykład w ten sposób i w jakiś sposób też chciałbym
wpłynąć na ten pomarańczowy element.
Tutaj jeszcze dodałem takie czarne kółka jako podstawki Na ten pomarańczowy
element w jakiś sposób chciałbym wpłynąć.
Mianowicie chodzi mi tutaj o materiał.
Mam tutaj dwie warstwy Lighting i Color lighting.
Może przedstawmy sobie na.
Ten lightning. Może przedstawmy sobie na Physical.
Tutaj mamy troszeczkę więcej opcji Raffness, Metal Ness i
Reflectivity Roughness.
Czyli połysk, który możemy ustawić sobie na przykład powiedzmy
tutaj na zero przecinek.
Pięćdziesiąt parę metalness.
Czyli taką metaliczność możemy ustawić na troszeczkę większą.
Okej, i reflectivity na przykład odbicia ustawmy sobie na jeden ok.
No i widzimy, że teraz tutaj mamy taki fajny błysk w tym miejscu.
Natomiast ten tryb mieszania światła samego światła możemy przestawić na.
Overlay.
Następnie dodamy sobie nową warstwę.
Będzie to matcap.
Możemy tutaj załadować dowolne dowolny obraz, który będzie imitował
właśnie oświetlenie.
Natomiast ja skorzystam tutaj może z tej bitmapy i tryb mieszania
tutaj ustawimy sobie na overlay.
Tutaj ten kolor sobie troszeczkę rozjaśnimy.
Ok.
I następna rzecz to nowa warstwa, ale oczywiście nie będzie to kolor, tylko
wykorzystamy sobie tutaj noise, czyli szum i szum ma kilka fajnych takich typów.
Simplex, Simplex, Fractal.
Ashima wygląda fajnie.
Możemy sobie tutaj popracować z rozmiarem tego szumu.
Możemy go troszeczkę zmniejszyć.
Też możemy sobie wybrać skalę.
Ustawmy sobie na przykład tutaj troszeczkę większy rozmiar.
Movement. Kolory.
Następnie mamy coś takiego jak.
Distortion, czyli coś w rodzaju jakiegoś zniekształcenia.
Tak na przykład możemy sobie tutaj ustawić powiedzmy około 30%.
I daje taką fajną strukture.
Jeszcze sobie może popracujemy z tą skalą.
Zobaczmy jeszcze jak na przykład wygląda FBM.
Berlin też wygląda fajnie.
Simplex.
Moim zdaniem daje całkiem fajny, fajny wygląd takiego, jakby to powiedzieć
szczotkowanego aluminium.
Jeszcze tutaj sobie spróbujmy po osi.
Y zwiększyć tą dystorsję.
Ok.
No i teraz możemy sobie popracować z kolorami.
Na przykład tutaj możemy sobie dać jakiś ciemniejszy.
Tu możemy sobie dorzucić jakiś jaśniejszy. Na przykład.
Nie wiem, może bardziej pomarańczowy.
Ok, w tym miejscu może taki bardziej żółty.
A i oczywiście możemy zmienić tryb mieszania.
Na przykład ustawmy sobie tutaj Multiply, ale.
Opacity ustawimy np. Na 40.
No i w ten sposób uzyskaliśmy taki wygląd tego obiektu.
Lighting Możemy sobie.
Może zmienimy sobie na przykład na screen.
I już.
Może nie jest tak inwazyjne to światło, ale na pewno będzie trzeba jeszcze
troszeczkę popracować nad kolorem, tak, żeby był bardziej pomarańczowy.
Jeszcze.
Zmniejszmy sobie może opacity tego szumu na przykład na 20.
I jeszcze tutaj może ten kolor ustawimy na.
Ciemniejszy?
Zastanawiam się jeszcze, czy pomarańczowy to jest w ogóle dobry kolor, czy może
będzie lepiej, jeżeli na przykład ustawimy sobie tutaj po prostu taki szary?
Tak, żeby to było takie bardziej metaliczne.
Myślę, że wygląda teraz ta klawiatura tak bardziej pro.
Czyli taka bardziej profesjonalna niż taka plastikowa.
I to, co teraz będziemy musieli jeszcze
ewentualnie zrobić, no to tutaj po prostu te kolory pozmieniać na jakieś
takie bardziej neutralne, czyli.
Czyli po prostu szare.
No i okej, chyba to tak zostawimy, więc myślę, że nasza klawiatura
jest gotowa, jest ready.
I możemy teraz śmiało przejść do kolejnych lekcji.