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.
Ok.
W tym rozdziale będziemy finalizować pracę z naszym modelem.
Będziemy go przygotowywać w taki sposób, aby można
było go wrzucić na stronę Webflow, ale tak na prawdę nie tylko Webflow, bo
można wykorzystać ten model naprawdę na wielu różnych platformach, więc to
nie musi być koniecznie webflow.
To nie jest tak, że spline współgra tylko i wyłącznie z Webflow, bo możemy wrzucić
takie sceny na przykład we Framerze czy.
Czy w Bubble, czy w jakimkolwiek innym systemie do budowania projektów do sieci.
Natomiast w tej konkretnej lekcji jedziemy sobie na chwilę do firmy, gdzie ja
przygotowałem taki bardzo prosty landing.
Na potrzeby naszego szkolenia umieściłem tutaj wizualizację naszej
klawiatury i wyeksportowałem sobie plik PNG z
klawiaturą oraz z tym switchem, który przygotowaliśmy w poprzednich lekcjach.
Aby to zrobić możemy po prostu przejść do Export, a następnie przejdę do
image i mogę tutaj ustawić format.
Możemy sobie zwiększyć rozdzielczość.
Tak naprawdę brakuje mi tutaj opcji, w których mógłbym zdefiniować
jakieś konkretne rozmiary tego pliku png, ale jeśli chcemy, aby ta
klawiatura była na transparencie to background color musimy ustawić na height.
No i oczywiście rozszerzenie pliku musi być ustawione na PNG.
Wybieramy export.
Wybieram save, a następnie muszę przejść do Photoshopa,
przyciąć sobie tą klawiaturę na przykład i sprawdzić oczywiście jakie ma wymiary.
Ok, ustawmy sobie mniej więcej taki kadr.
W porządku, może wyostrzymy sobie delikatnie smart sharpen.
I możemy sobie zapisać ten PG, a następnie wykorzystamy go w projekcie w filmie.
Więc wracam do Sigmy i tutaj ja zbudowałem sobie
to z komponentów, które mam, aby mieć dostęp do tej biblioteki.
Oczywiście musimy stworzyć sobie konto na relu, a następnie przechodzimy do plugins.
Wybieramy Manage plugins.
I wybieramy rerum.
Tutaj możesz tego pluginu nie widzieć.
Wystarczy, że po prostu wpiszemy sobie tutaj i mamy bibliotekę pluginów.
Ja wybieram właśnie ten plugin.
Tutaj wystarczy, że się zalogujemy do naszego konta, więc wybieram login tutaj.
Następnie.
Potwierdzam dane i mam informację o tym, że Sigma została pomyślnie połączona z
pluginem Rerum i teraz mogę wrócić do firmy.
Wybieram Real Firma Kit, a następnie Open in Sigma.
I już mam dostęp właśnie do tej gigantycznej biblioteki.
Ja sobie tutaj wybiorę jakiś prosty navbar.
Na przykład ten.
Command V.
Wybiorę sobie jakąś prostą sekcję Hero.
Możemy przejść do Hero Header i zobaczmy czy coś tutaj jest ciekawego.
Wybiorę może tą command Command V.
Ok, jakąś sekcję tutaj, gdzie możemy przestawić ficzery naszego produktu np.
Features.
Wybierzmy sobie na przykład to.
I może jakiś prosty footer.
Przejdźmy do footers.
Jakiś mały prosty np.
Ten command ce i command V.
Ok.
No i żebym teraz mógł sobie podłubać w tych szablonach.
Muszę odłączyć tę instancję od głównych komponentów, więc wybieram prawy klawisz
myszy, a następnie TouchInstance.
No i teraz na przykład tutaj mogę wybrać Image Choose Image, a
następnie wybiorę sobie naszą klawiaturkę. Wybieram open.
No i pięknie. Dokładnie o to mi chodziło.
Mało tego, chciałbym jeszcze tutaj wprowadzić jakiś background.
Ja sobie wcześniej przygotowałem taki.
I tutaj importuję go jako bitmapę, a w Webflow wykorzystamy plik SVG, więc tutaj
wybieram fill, a następnie to co mnie interesuje to tutaj dostęp do tego koloru.
Nie chciałbym, żeby to był płaski kolor.
Chciałbym, żeby to była bitmapa.
Wybieram image znowu.
I mam tutaj plik background. To jest JPG.
Wrzucę go sobie tutaj.
Mogę wybrać sobie crop, a następnie troszeczkę go sobie przeskalować.
Na przykład w ten sposób.
I zatwierdzam.
Co do klawiszy.
Myślę, że tutaj możemy znowu wybrać prawy klawisz myszy i odłączyć sobie tą
instancję, a następnie spróbujemy sobie zaokrąglić narożniki.
Kolor może zapożyczymy sobie stąd, bo ten pomarańcz jest całkiem fajny, więc możemy
sobie tutaj wybrać fill kroplomierz i zapożyczyć sobie kolor.
Stąd jako kolor wypełnienia.
Mamy tutaj zaokrąglenie ustawione na 6.
Tutaj też sobie zrobimy to samo.
Wybierzmy tylko.
Touch instance i ustawimy sobie tutaj 6.
Natomiast zastanawiam się, czy nie byłoby fajnie, gdybyśmy tutaj
na przykład dali czarny background.
Możemy go zapożyczyć na przykład stąd, bo to nie jest taki taka typowa czerń.
Ok, no a jeśli chodzi o sam tekst, to może niech on będzie tutaj pomarańczowy.
W porządku, teraz jeśli chodzi o ten element, też sobie tutaj odłączę
wybierając Touch instance i mogę na przykład przerzucać się tymi elementami.
Na przykład powiedzmy, że chciałbym, żeby to było z lewej strony.
I tutaj, jeśli chodzi o ten element, to wybiorę image, a wybiorę image.
I wybiorę sobie wcześniej wyeksportowany kij i caps.
Ok.
Teraz dla tego elementu chciałbym zapożyczyć sobie wypełnienie.
Wybierzmy tutaj.
Może rozłączmy się z tym, z tą zmienną tutaj kolorystyczną i
wybierzemy sobie na przykład kolor stąd, ok.
I teraz jeśli chodzi o tą stopkę, to może niech ona będzie na przykład powiedzmy.
W tym kolorze.
Okej.
A teksty i wszystkie te poszczególne elementy tutaj po rozłączamy
i chciałbym, żeby one były białe, ewentualnie te elementy
niech będą pomarańczowe.
Tutaj też rozłączymy sobie tą instancję.
Instance, To nam jest niepotrzebne.
Zejdziemy sobie tutaj, niżej i tutaj.
Teraz powinniśmy zadbać sobie o jakąś typografię moim zdaniem.
Te dwa przyciski Command-C.
Wrzucimy je sobie tutaj.
A te sobie usuniemy.
Zastanawiam się nad backgroundem dla tego elementu i tutaj może
będzie fajnie, jeśli zapożyczymy sobie znowu ten czarny ok, a poszczególne
elementy niech będą już białe.
No i taki prosty landing z na szybko spróbujemy sobie odtworzyć w Webflow.
A jeśli chodzi o typografię, to tutaj taki font przychodzi mi do głowy, który nazywa
się Blender Pro i pokażę Ci jak on wygląda w nagłówkach.
Blender Pro w wersji heavy w tym przypadku wygląda całkiem fajnie.
A tutaj wybierzemy Blender Pro, ale w takiej wersji skromniejszej np.
Bold może nie, ale bug wygląda całkiem fajnie.
To sobie możemy powiększyć do powiedzmy 68.
I to samo tutaj.
Ok, to tak mega na szybko.
A teraz w tej lekcji to już wszystko.
Dziękuję Ci serdecznie za uwagę i przechodzimy dalej.
Do usłyszenia po przerwie.