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.
W tej lekcji pokażę Ci czym jest bump effect.
I zrobimy to na tych okularach, które w zasadzie chciałbym, żeby wyglądały
tak, jakby były z metalu.
Więc zaznaczmy sobie może na przykład najpierw ten obiekt I tutaj zamiast
kolor wybierzmy sobie na przykład matcap.
Okej.
No i może niech to będzie taki bardziej metaliczny, może taki, albo może taki.
Nie, wolałbym, żeby było troszkę bardziej metaliczny.
Może ten.
Okej.
I teraz dodamy sobie tutaj jeszcze jedną warstwę.
Będzie to nie kolor, a image, czyli coś, z czym już pracowaliśmy.
I tutaj chciałbym, żebyśmy skorzystali z jakiejś wbudowanej bitmapy.
Nie będziemy nic ładować, chociaż możemy oczywiście za pomocą plusa załadować sobie
jakąś własną teksturę, ale mam tutaj na przykład coś takiego
jako jedną z takich wbudowanych bitmap.
I mogę tę bitmapę wykorzystać jako tak zwany bump map, czyli coś, co pozwoli mi
uzyskać tutaj swego rodzaju jakieś niedoskonałości.
Ok, mamy tą bitmapę tutaj dodaną.
Ja teraz wyłączę ją zamykając to oczko.
Widzimy, że jest już jej tutaj nie ma.
Ona cały czas jest, tylko po prostu jest wyłączona z widoku.
A następnie przejdę do warstwy lighting, czyli oświetlenie.
I tutaj mam taką pozycję jak bump map.
Rozwijam listę i wybieram właśnie ten właśnie tą włączoną tutaj bitmapę.
Ten efekt jest zbyt mocny, więc ustawmy sobie tutaj np.
0,5.
Ok, no i teraz wygląda to troszeczkę lepiej, ale cały czas jeszcze
za bardzo, więc może ustawmy minus 0,01.
No i teraz dało nam to taki bardziej subtelniejszy efekt jakiś
niedoskonałości czy porysowanej struktury.
Tak, wygląda całkiem całkiem fajnie.
Naturalnie możemy sobie tutaj dodać jeszcze coś.
Dodaję sobie kolejną warstwę jeszcze i może też niech to będzie Madcap,
ale tym razem może jakiś inny, bardziej błyszczący, może taki.
I widzimy, że też fajnie to współgra z tymi niedoskonałościami.
Fajnie się to odbija tutaj naturalnie jeżeli
zaznaczymy sobie tą warstwę image i będziemy tutaj na przykład w jakiś sposób
sobie skalować tą bitmapę, no to widzimy, że mimo że jest ona tutaj niewidoczna, bo
jest wyłączona, no to działa to tutaj, na tym, na tym naszym efekcie bump.
Zróbmy na przykład coś takiego.
Okej, wygląda fajnie ten matka.
Może ustawmy sobie tutaj tryb mieszania screen.
I teraz fajnie nam się tu błyszczy.
Super! Podoba mi się ten efekt.
Możemy zapisać ten materiał, więc wybieram znowu tą ikonkę z czterema kropkami.
Wybieram ikonkę plusa i na przykład możemy sobie to nazwać Scratch it still,
czyli porysowana stal na przykład.
Chyba tak to się pisze i na przykład ten sam,
ten sam materiał mogę dodać tutaj do tego obiektu, więc przechodzę do sekcji
Materiał wybieram Scratch Still.
Ok, no i uzyskaliśmy coś takiego.
Podobny materiał możemy dodać tutaj do tych pozostałych elementów.
Jeśli chodzi o szkło tutaj, to możemy jeszcze ewentualnie dorzucić
tutaj warstwę z efektem fresnel.
Przykładowo zmienić jego kolor na przykład na jakiś niebieski albo fioletowy.
Może coś takiego?
Ok, wygląda fajnie.
Możemy tutaj wrzucić tryb mieszania np. Overlay.
O i teraz mamy fajne szkiełko.
Zajmiemy się teraz tym większym cylindrem.
Tutaj rozwinę sobie listę z assetami i też wybiorę ten scratched
STL, ale troszkę go tutaj przerobimy, więc muszę tutaj wybrać ten łańcuszek,
aby mieć dostęp do tych pozostałych warstw naszego
materiału, to może sobie usunę następnie ten obraz z tą porysowaną
strukturą myślę, że sobie zostawimy.
Natomiast chciałbym, żeby ten element był troszeczkę jaśniejszy.
Dodamy sobie jeszcze jedną warstwę. Będzie to kolor.
Przerzucimy sobie tą warstwę na spód.
Niech to będzie kolor troszeczkę jaśniejszy, a ten matka tutaj
ustawimy sobie na screen i teraz.
Wygląda to w ten sposób.
Może troszeczkę tutaj za jasno, więc ten kolor sobie delikatnie przyciemnimy.
Okej, ewentualnie możemy też spróbować to w jakiś sposób sobie pokolorować.
Może na przykład tak.
Teraz matka może przestawiamy na overlay.
I też wygląda całkiem fajnie.
Spróbujmy może z jaśniejszym kolorem.
Ok. Możemy jeszcze dodać np.
Sobie tutaj deep, czyli głębie.
Od razu przechodzimy do ustawień.
Chciałbym, żeby w środku było troszeczkę ciemniej, a na zewnątrz jaśniej.
Okej.
I tryb mieszania ustawmy na overlay.
I wygląda to całkiem fajnie.
Możemy sobie ten materiał zapisać.
Nazwijmy to Pink.
Steel.
Dodamy go tutaj.
I myślę, że nasza rybka wygląda bardzo fajnie.
Ok.
A teraz to wszystko.
Zróbmy sobie chwilę przerwy i do usłyszenia.