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 do kolejnej lekcji, w której będę chciał umieścić tutaj
dedykowane elementy dla scen, które będziemy importować ze spline.
Najpierw jednak zróbmy porządek z tymi przyciskami.
W momencie kiedy ładujemy do Webflow jakieś
komponenty z Rerum, to często się dzieje tak, że zmienne
nie są dodatkowo zaimportowane.
Dlatego mamy tutaj informację, że jest błąd i jest nieznana zmienna.
Dlatego trzeba to zresetować. Klikamy na to.
Z altem i możemy sobie tutaj zmienić kolor.
Tak samo jeśli chodzi o background.
Tutaj też klikamy sobie z altem i tutaj kolor.
Myślę, że wrzucimy sobie stąd ok.
Zostało to dodane do również przycisku po tej stronie.
Bardzo dobrze.
Jeśli chodzi o text to dokładnie będzie to oczywiście Blender Pro.
Stopień pisma sobie ustawimy tutaj.
Może najpierw wybierzmy sobie Black.
I ustawmy sobie tutaj 16.
Tutaj też zresetujemy sobie kolor, ale nie chcemy żadnej.
Żadnego obrysu dla tych przycisków.
Myślę, że będzie zbędny.
I kolor tekstu niech będzie biały.
Też możemy sobie tutaj ustawić zmienną jeśli chcemy, ale może
nie będziemy tego robić.
Ok, teraz ten przycisk w zasadzie ma.
Ten sam styl.
Natomiast tutaj jest jakiś błąd z tym, z tą strzałką.
Dlatego myślę, że powinniśmy przyjść tutaj i layout ustawić sobie na flex.
Na przykład wyśrodkować sobie wybierając Enter
możemy sobie ustawić odstęp, ale to chyba nie jest konieczne w tym przypadku.
No i ok, mamy przyciski porobione.
Więc teraz zajmijmy się tutaj tym elementem.
Tutaj mamy miejsce na obraz.
To jest placeholder, ale jeżeli przejdziemy sobie tutaj
do Add Elements i wyszukamy sobie spline, no to mamy już tutaj pewien element.
Ja sobie go wrzucę tu, ale oczywiście obraz sobie usunę.
Nie chcę go absolutnie, okej.
No i mamy już ten element.
Natomiast jest on za wąski.
Chciałbym, żeby był na całą wysokość tego, tej sekcji, więc musimy sobie tutaj
zastosować ten sam styl, który był nadany dla tego placeholder owego obrazu.
Na przykład header1 image.
Wygląda to całkiem fajnie i jeżeli wybierzemy sobie podgląd.
No to już tutaj mamy ten element trójwymiarowy.
Tak więc to jest taki swego rodzaju domyślny element od spline.
Wróćmy do designera.
To samo zrobimy tutaj.
Tutaj też wybiorę sobie spline i wrzucę tutaj w to miejsce.
Ten placeholder owy obraz nam nie jest potrzebny.
A tutaj wybierzmy sobie.
Odpowiedni.
Odpowiedni styl. Ok.
No i w porządku. Na naszej stronie będą dwa elementy.
Wygląda to w ten sposób.
Naturalnie możemy sobie tutaj coś z nimi zrobić, możemy się przybliżyć, oddalić.
Natomiast dodamy sobie tutaj naszą klawiaturę.
Więc teraz musimy wrócić do spline.
I w sekcji Export Przechodzimy do WR.
Wybieramy Play Settings i tutaj oczywiście nie chcemy
LogoBackground color Ustawiamy na heightpageScroll.
Możemy zostawić kursor też możemy zostawić, bo może być tak, że gdy
najedziemy kursorem na nasz element możemy go schować.
Ale zostawmy to.
Nie chcę, żeby użytkownik w jakiś sposób orbitował tutaj tą naszą klawiaturą.
Nie chcę, żeby mógł ją przybliżać, powiększać i tak dalej.
Poza tym wszystko zostawiamy tak jak jest.
Możemy jeszcze zobaczyć sobie podgląd i ja tutaj do całej grupy, która tworzy
klawiaturę dodałem jeszcze taki mały ruch, który sprawia, że ona po prostu
się tak rusza delikatnie.
Tak to możemy zostawić.
Więc jeszcze raz export.
Następnie tutaj kopiuję ten górny kod Proces Design.
Wybieram kopiuj.
Link został schowany do schowka.
Wracam teraz do Webflow i tutaj zaznaczam nasz komponent Spline.
Klikam na ten trybik, aby przejść do jego opcji i tutaj wklejam kod.
Ok. No i w zasadzie wygląda fajnie.
Ogólnie rzecz biorąc wszystko jest ok, poza jedną rzeczą.
Widzimy, że tutaj jest to przycięte brzydko.
Dlatego wrócimy do Spline i tutaj zmienimy sobie rozmiar.
Sceny z responsywnego na jakiś konkretny.
Mamy tutaj całą masę gotowych, predefiniowanych ustawień, ale ja wybiorę
custom size i ustawimy sobie na przykład powiedzmy 800 na 800.
Niech to będzie taki kwadrat, w którym nasza klawiatura się mieści.
No i teraz, żeby to zostało zaktualizowane w Webflow, to jedyne co muszę
zrobić to wybrać update Ver.
I w zasadzie to wszystko.
Jeśli teraz wrócę do Webflow.
A następnie odświeżę sobie stronę, no to widzimy, że wszystko tutaj pięknie działa.
No i sprawdźmy, czy jest Tutaj zachodzi cała nasza interakcja,
którą przygotowaliśmy.
Widzimy, że guziki się ładnie obracają, klawisze pięknie tutaj się wciskają.
Mamy piękną wizualizację na stronie produktowej.
Ok, zostanie nam jeszcze jeden element do wrzucenia, czyli tutaj.
Chciałbym, żebyśmy wrzucili ten key caps.
No a poza tym to zadanie zostało jak najbardziej spełnione.
Misja wykonana.
Okej, a teraz to wszystko z mojej strony w tej lekcji przechodzimy dalej.