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.
Cześć! Witam Cię w kolejnej lekcji.
Tym razem popracujemy z nowym materiałem.
Pierwszy z nich już mamy dodany, a teraz zajmiemy się materiałem, który posłuży
nam do stworzenia oczu naszej naszej ryby.
Ok, mamy tutaj taką sferę i dodamy Tutaj zamiast koloru dodamy
warstwę deep, czyli głębia I teraz będziemy pracować z tą głębią.
Przede wszystkim ustawmy sobie tutaj te skrajne punkty, czyli
jeden i ten drugi najdalszy.
OK, stworzymy sobie właśnie coś w rodzaju takiego gradientu, przy czym wysuniemy
sobie ten gradient mniej więcej tu ok i zamienimy miejscami te próbniki z
na rampie gradientu.
Tu na przykład niech będzie biały, a czarny przesuniemy sobie gdzieś tutaj, ok?
Ten czarny chciałbym ustawić na jakiś ciemnobrązowy.
Następnie klikam tutaj i dodajmy sobie kolejny kolor, może troszeczkę
bardziej pomarańczowy.
W ten sposób powiedzmy Ok i znowu tu dodam sobie klikam, aby
dodać jeszcze jeden pomarańczowy, a tu klikam, aby dodać kolejny pomarańczowy,
który tym razem będzie czarny.
Ok i mamy coś takiego.
Wygląda całkiem fajnie.
Byłoby super, gdyby to oko się w jakiś sposób błyszczało.
Więc dodamy sobie jeszcze jedną fajną warstwę, którą z której bardzo
często korzystam i jest to tzw.
madcap, czyli taki taka imitacja połysku.
I tutaj jeżeli klikniemy na tą warstwę, to mamy do dyspozycji
kilka bardzo fajnych, wbudowanych tekstur.
Z takimi presetami, które dają bardzo ciekawy połysk.
I jeżeli zaznaczymy sobie jeden z nich, no to widzimy, że bardzo fajnie ta kulka się
błyszczy i wygląda to wygląda to rewelacyjnie.
Ja proponuję, żebyśmy wybrali na przykład ten albo ten chyba będzie
lepszy moim zdaniem.
tylko, że musimy przestawić tryb mieszania dla tej warstwy.
Matka P.
Rozwijam listę i wybieram screen, aby wyłączyć to co czarne, ażeby
nam został tylko kolor biały.
No i wygląda na to, że mamy bardzo fajną gałkę oczną, którą możemy
sobie tutaj zatopić.
Okej.
Wygląda to całkiem fajnie.
I teraz, żeby przenieść tą samą grupę warstw jako materiał na to drugie oko, to
myślę, że po prostu zapiszemy sobie ten materiał.
Wybieram więc tutaj te cztery kółka, a następnie wybieram.
Stworzenie nowego assetu.
Material Asset wybieram plus.
Możemy sobie to nazwać na przykład I Material.
Okej.
No i teraz zaznaczam sobie to drugie, to drugie oko.
Znowu przechodzę do.
Sexi material.
Klikam na cztery kółka i z listy Material Assets wybieram nasz materiał.
Widzimy, że nie ma go tu, dlatego proponuję, żebyśmy po prostu odwrócili
sobie to nasze oko o 90 stopni.
Ok.
No i wygląda na to, że mamy całkiem fajne oczy.
Byłoby super, gdyby te okulary miały jakieś szkło.
Tak.
Czyli możemy na przykład zaznaczyć sobie jedną taką sferę wybrać
command the, nazwijmy ją glass.
I możemy ją na przykład wrzucić do grupy okularów 1, czyli tutaj.
Następnie, aby usunąć z tej sfery materiał z tą naszą źrenicą, to po prostu
przechodzę do sekcji Material.
A następnie wybieram tutaj ten łańcuszek i na przykład możemy sobie
usunąć deep, a zamiast matka przeniesiemy sobie Tutaj dodamy sobie gaz.
Ok. Powiększymy sobie troszeczkę tą sferę.
Następnie przechodzimy do ustawień tego szkła, czyli klikam na warstwę glass.
Zmniejszymy sobie może blur sickness?
Też zmniejszymy I index of reflection.
Okej, wygląda całkiem fajnie.
Jeszcze żeby było ciekawiej to dodamy sobie madcap.
Rozwijam tutaj listę z tymi presetami.
Może na przykład ten powiedzmy i tryb mieszania ustawiamy na screen.
I mamy bardzo fajne szkiełko.
Wybierzmy command.
de, aby skopiować to szkiełko i przenieśmy tutaj.
A następnie dodajmy do tej drugiej grupy Okular 2.
Ok. Wygląda rewelacyjnie.
W kolejnych lekcjach dodamy jeszcze kilka materiałów, stworzymy
całkiem fajne tekstury.
A potem dodamy interakcje i animacje do tej ryby po to, aby później przerzucić ją
na przykład do sekcji Heroes stronie na stronie internetowej.
A teraz to wszystko w tej lekcji. Do usłyszenia za chwilę.