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.
Jesteśmy teraz w lekcji, w której stworzymy sobie nasz pierwszy plik.
Wybieram więc new file albo ewentualnie ikonkę plusa
i ładuję się nasz obszar roboczy.
Możemy sobie tutaj wybrać jakiś element z biblioteki, ale nie będę tego robił.
Wystarczy, że kliknę gdzieś poza.
No i jesteśmy już w naszym obszarze roboczym.
Domyślnie zawsze są tutaj dodawane dwa elementy.
Pierwszy z nich to podstawowy Directional Light oraz czyli płaski płaski prostokąt.
To są domyślne elementy.
Po lewej stronie ekranu mamy tak zwany panel z obiektami i assetami.
Możemy troszkę to traktować jak na przykład panel z warstwami w Photoshopie.
Tak, ponieważ tutaj mamy listę wszystkich naszych obiektów, które
znajdują się na naszej scenie.
Tak jak wspomniałem, domyślnie są to dwa obiekty, czyli prostokąt
i Directional light.
Jeżeli dodamy tutaj nowy element, oczywiście on się tutaj znajdzie.
Możemy przejść do zakładki Assets i tutaj na przykład stworzyć sobie bibliotekę z
assetami, ładując tutaj na przykład pliki z naszego dysku.
Wystarczy, że wybierzemy sobie ikonkę z plusem i możemy sobie tutaj teraz kliknąć,
a następnie a następnie wybrać sobie plik mp3 z naszego dysku.
Ale nie będę teraz tego robił, to sobie usunę.
Najważniejszy tutaj jest panel Objects.
Mamy też do dyspozycji Library, czyli bibliotekę, gdzie możemy
sobie wrzucić tutaj np.
Darmowe darmowe obiekty np.
To mamy też kategorie.
Klikam dwukrotnie i widzimy, że ten element, ta grupa obiektów w
zasadzie została tutaj dodana.
Jest ona nazwana Crystal Ball i kiedy rozwinę sobie
tą grupę, no to mam wszystkie elementy, z których się ona składa.
Możemy też sobie zaimportować model 3D np.
Jeżeli stworzyliśmy sobie coś wcześniej w Blenderze i wyeksportowaliśmy to jako
obiekt, to możemy śmiało sobie taki model pobrać.
Ale możemy też zaimportować sobie pliki wideo, pliki dźwiękowe, wektory, obrazy
czy stworzyć nasze własne assety za pomocą AI, czyli sztucznej inteligencji.
Następnie przechodzimy do prawego panelu, który jest kolejnym bardzo istotnym
elementem naszego interfejsu.
Jeżeli nic nie mamy zaznaczone, to po prostu mamy tutaj główne
ustawienia naszego dokumentu.
Ale jeżeli ja zaznaczę sobie jakiś obiekt, no to wtedy ten panel przechodzi tutaj w
tryb panelu do zarządzania preferencjami danego obiektu.
I to co tutaj mamy jest zależne od typu obiektu z jakim pracujemy.
W tym momencie zaznaczyłem sobie zwykły prostokąt i mam dedykowane opcje
dotyczące pracy z tym prostokątem.
Mogę też dodać mu materiał czy jakieś ewentualnie cienie,
czy czy dodać mu fizykę.
Jeżeli zaznaczę sobie na przykład światło, to możemy zwrócić uwagę, że zawartość
tego panelu z preferencjami się zmieniła.
Tak jak wspomniałem, to co tutaj mamy wyświetlone jest zależne od obiektu
z jakim aktualnie pracujemy.
U samej góry natomiast jest panel narzędziowy, gdzie możemy wybrać sobie typ
obiektu jaki chcemy dodać do naszej sceny, albo ewentualnie wybrać ikonkę z plusem.
I tutaj mamy całą bibliotekę takich wyjściowych, podstawowych obiektów,
z którymi będziemy pracować.
Mamy również kamerę, różne rodzaje światła, podstawowe obiekty
i to wszystko będzie do naszej dyspozycji.
A teraz w tej lekcji to wszystko.
Przechodzimy do lekcji następnej, w której porozmawiamy o nawigowaniu.
Do usłyszenia.