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, przechodzimy teraz do nawigowania.
Przesuwamy się po naszej scenie z pomocą spacji, czyli tak jak w każdej
innej aplikacji graficznej.
Przytrzymuje spację, wyświetla mi się łapka i mogę przesunąć
się góra dół, prawo, lewo.
Jeśli chcę się przybliżyć do naszego obiektu, przytrzymuję prawy klawisz
myszy, a następnie przeciągam myszą.
Ewentualnie mogę skorzystać ze skrótu klawiaturowego Command+
lub Ctrl + jeśli pracujesz na Windowsie, a analogicznie Command i Ctrl minus
oddala nas od naszych obiektów.
Jeśli chodzi o orbitowanie wokół naszych obiektów, to przytrzymujemy klawisz Alt na
Windowsie Option na Macu i wtedy możemy obracać się.
Wokół naszych obiektów.
Możemy zwrócić uwagę na to, że kiedy tutaj przeniesiemy się za ten
prostokąt, to go nie widzimy, dlatego, że ma on tutaj ustawioną widoczność na
front, czyli widzimy go tylko z przodu.
Jeżeli wybierzemy sobie boss, to będziemy widzieć go zarówno tutaj i tutaj.
Tak, żeby go usunąć, możemy po prostu wybrać delete albo backspace i
tego obiektu już tutaj nie mamy.
Mamy natomiast naszą kryształową kulę, do której możemy się przybliżyć.
Możemy się tutaj przesunąć przypominam z użyciem spacji czy z altem albo Option.
Na Macu możemy orbitować wokół tego obiektu.
Jeśli chodzi o pracę z tym obiektem, to mamy podstawowe tutaj
uchwyty, które pomogą nam przesuwać, skalować i obracać nasz obiekt.
Mamy uchwyt niebieski, za pomocą którego poruszamy naszym obiektem po osi z.
Następnie mamy uchwyt czerwony, za pomocą którego poruszamy naszym obiektem po osi X
i wreszcie uchwyt zielony, którym poruszamy naszym obiektem po osi Y.
Możemy też zauważyć, że w momencie, kiedy nasz obiekt jest zaznaczony i poruszamy
naszym obiektem za pomocą tych uchwytów, no to tutaj zmieniają się
współrzędne tego obiektu.
Jeśli ustawimy tutaj wszędzie 0.
To nasz obiekt będzie dokładnie na środku naszej sceny.
Czyli w miejscu, gdzie przecinają się czerwona oraz niebieska linia.
Natomiast te kontrolery pomagają nam też obracać naszymi obiektami, Jeśli
chwycimy za ten niebieski łuk.
Będziemy obracać naszym obiektem wokół osi Z.
Możemy przytrzymać klawisz Shift i będziemy obracać co 5 stopni.
W ten sposób, jeśli będziemy obracać za pomocą tego
czerwonego łuku, będziemy obracać nasz obiekt wokół osi X.
No i Command set lub Ctrl+C.
Cofamy naszą operację i to samo możemy też zrobić tutaj w panelu kontrolnym.
Jeśli chcemy obrócić nasz obiekt wokół osi X o 50 stopni.
Możemy sobie tutaj wpisać 50 albo ewentualnie odwrotnie.
W drugą stronę wpiszemy sobie tutaj minus 50.
Zaznaczmy nasz obiekt.
Wybierzmy prawy klawisz myszy, a następnie zjedźmy tutaj, a następnie zjedziemy na
sam dół, przytrzymując prawy klawisz myszy i wybierzmy Reset Rotation.
Możemy też nasz obiekt skalować za pomocą tutaj tych kółek.
Czerwone kółko oczywiście będzie skalować nasz obiekt wokół wzdłuż osi X.
Niebieskie kółko będzie skalować nasz obiekt wzdłuż osi Z, a
zielone wzdłuż osi Y.
Możemy też skalować proporcjonalnie, czyli jeżeli chwycimy za którykolwiek z naszych
kółek i przytrzymamy klawisz Shift, to skalujemy proporcjonalnie.
Oczywiście całe to skalowanie jest wykonywane względem środka naszego
obiektu, czyli środka tych uchwytów kontrolnych.
Czy możemy sobie przestawić pozycję takiego uchwytu kontrolnego?
Tak, Możemy na przykład ustawić go wewnątrz tej sfery.
Jak to zrobić?
Klikamy z klawiszem Alt na naszą grupę obiektów, a następnie przesuwam sobie np.
Tutaj wzdłuż.
Uchwytu Y.
Teraz jeżeli zaznaczę nasz obiekt, no to oczywiście będę go obracał w ten sposób.
Czy skalował właśnie względem tej pozycji?
Wybierzmy Command.
Z kilka razy wcześniej obracaliśmy i skalowaliśmy
względem podstawy tego obiektu.
Przypominam klikam na nasz obiekt z wciśniętym klawiszem Alt
lub Option, a następnie mam możliwość przesunięcia
anchorpointu, czyli punktu odniesienia naszego obiektu.
Klikam, aby zatwierdzić.
Następnie zaznaczam nasz obiekt raz jeszcze i wszystko działa.
No a teraz to wszystko w tej lekcji.
Myślę, że możemy śmiało przejść dalej.