Spline 3D: Sprawdzanie działania w Webflow
Interaktywne Sceny 3D w Webflow
2 godz. 30 min · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Poznanie interfejsu Spline
- Nauka poruszania się po narzędziach
- Tworzenie predefiniowanych obiektów
- Praca z polygonami oraz modyfikatorem Subdivision
- Modelowanie customowych kształtów
- Tworzenie rozbudowanych materiałów
- Dodawanie tekstur i oświetlenia
- Projektowania zdarzeń i animacji
- Zaawansowane interakcje w Spline
- Budowanie stanów obiektów i zarządzenie nimi
- Opcje eksportu
- Wdrażanie scen 3D w projektach Webflow
Czym jest Spline
Spline 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.
Przewaga rynkowa dzięki Spline
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.
Co w kursie
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.
Interfejs i modelowanie
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.
Interakcje i wdrażanie
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.
Dla kogo jest ten kurs?
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.
Skoro ustawienia eksportu są już za nami, to możemy sobie skopiować link i
przejść do Webflow.
W tej lekcji będę chciał tylko sprawdzić jak działają interakcje, jak Webflow
odczytuje tę interakcję i czy faktycznie wszystkie interakcje, które
zaprojektowaliśmy będą również miały swoje odzwierciedlenie.
Webflow.
Przejdźmy jeszcze na chwilę do Settings i wyłączę sobie Background Color.
Chcę, żeby nasza ryba była widoczna na transparencie.
I teraz wybierzemy update URL.
Następnie mamy informację o tym, że wszystko zostało zaktualizowane.
Możemy przejść do Viewer, a następnie przejdziemy do Webflow.
Mam tutaj taki bardzo prosty landing.
Będę chciał tutaj sobie wrzucić Rzucić tą naszą rybkę w tej sekcji głównej,
więc myślę, że możemy wybrać sobie plus element.
I mamy tutaj dedykowany element, który nazywa się Spline Scene.
Możemy sobie taką scenę dodać.
Ona została tutaj wrzucona.
Możemy wybrać sobie podgląd i widzimy, że faktycznie już to wszystko działa.
Możemy sobie tą sceną w jakiś sposób tutaj manipulować.
Ona już w jakimś sensie jest interaktywna.
No i teraz chciałbym, żebyśmy po prostu tutaj, w ten placeholder
wrzucili sobie naszą, naszą rybę.
Dlatego przechodzimy do opcji tego komponentu Scene, czyli settings.
Jeżeli to nie jest widoczne, to znaczy, że musimy sobie kliknąć tutaj na ten trybik.
No i tu musimy wkleić adres do naszej sceny.
Więc przechodzę do VAR.
Wybieram kopiowanie tego pierwszego linku.
Mam informację, że link został skopiowany do schowka.
Wracam do Webflow.
I tutaj wklejam ten link.
Widzimy, że nasza ryba się pojawiła.
Wybierzmy sobie plej i zobaczmy jak to wygląda.
Przechodzę tutaj niżej.
No i faktycznie wszystkie interakcje chyba działają.
Wygląda na to, że mamy sterowanie tym światełkiem, które oświetla
na niebiesko naszą rybę.
Ryba spogląda, oczywiście wędruje za kursorem.
Jeżeli na nią najedziemy, uwalniają się bąbelki, A jeżeli na nią klikniemy, no
to ona tutaj ucieka sobie ładnie do góry.
I dokładnie o coś takiego nam chodziło, Ale chciałbym, żeby ta ryba
znalazła się tutaj, w tej sekcji.
I nawet byłoby fajnie, gdyby znalazła się ona nad tym tekstem, na tym tekście i
jeżeli będziemy chcieli go przeczytać, będziemy musieli kliknąć na rybę
tak, żeby ona nam się podniosła.
Co w związku z tym robimy?
Zaznaczamy tutaj w nawigatorze naszą scenę Spline, a następnie przechodzimy
do Position i ustawiamy na i.
Przestawiamy na Absolute, a następnie przeciągamy naszą scenę
nad sekcję z headerem.
No i wygląda na to, że wszystko działa.
Zobaczmy sobie jeszcze podgląd.
Ok, wygląda fajnie.
Klikam na rybę, ryba się podnosi.
Możemy sobie przeczytać, przeczytać tekst.
Jeszcze jedną rzecz chciałbym tutaj zrobić.
Troszeczkę kolorystycznie.
Niezbyt pasuje mi ta ryba tutaj do.
Tego layoutu.
Myślę, że byłoby fajnie, gdyby ona była troszeczkę bardziej taka pomarańczowa.
Dlatego możemy wrócić do spleen.
Upewniam się, że mam wszystko odznaczone.
Dzięki temu mogę przejść bezpośrednio do Material Assets.
Mam tutaj nasz material body, klikam na niego i na przykład możemy sobie
usunąć tą warstwę z kolorem, a następnie możemy przejść
sobie do tej warstwy Deep z.
Tryb mieszania ustawiamy na normal, natomiast myślę, że możemy sobie tutaj ten
kolor troszeczkę podmienić, tak żeby on był może bardziej
w ten sposób, żeby działał okej.
Możemy sobie to troszeczkę rozjaśnić i chyba wygląda fajnie.
Następnie przejdziemy do materiału, który określa nam kolor płetw.
I tutaj zrobimy sobie coś takiego.
Ok, zmiany zostały naniesione i teraz wybieram export, a
następnie wybieram update.
W sekcji Viewer mamy informację o tym, że URL został zaktualizowany i teraz jeżeli
ja sobie wrócę do Webflow to klikam tutaj na naszą scenę
Spline, a następnie wybieram Reload Spline.
Scan i otrzymaliśmy naszą rybę w nowych kolorach.
Teraz zobaczmy sobie jak to wygląda na podglądzie.
No i ok, wszystko działa.
Aby przeczytać tekst możemy kliknąć na naszą rybę.
Ona podnosi się do góry.
Jeżeli podnosi się za słabo, to zawsze możemy wrócić do spline.
Tutaj możemy zaznaczyć naszą rybę i w Big Fish możemy sobie ją podnieść
jeszcze troszkę bardziej do góry.
Ok.
Wybierzmy eksport.
Znowu Update Viewer.
Link został zaktualizowany.
Przypominam, że przy pracy z Webflow korzystamy z tego linku, więc kopiujemy
z u samej góry w sekcji Viewer.
Wracam do Webflow.
Tutaj znowu możemy sobie zaktualizować wybierając reload.
Split screen.
I zobaczmy podgląd.
Wszystko działa perfekcyjnie.
Ok.
Dokładnie o taki projekt nam chodziło.
Nasza misja została wykonana, ale przed nami jeszcze jeden bardziej złożony
projekt, czyli model fizycznego produktu.
A na teraz to wszystko.
Zapraszam Cię do kolejnego rozdziału.