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.
W tej lekcji będę chciał wyeksportować nasz plik w taki sposób, abyśmy mogli
później umieścić go na przykład na stronie internetowej.
Mamy tutaj przycisk Export.
Przechodzę do Play Settings i na przykład jeżeli korzystamy z płatnej
wersji Spline, to możemy włączyć sobie logo.
Nie chcę, żeby gdzieś ono tutaj w rogu widniało, więc wybieram.
No.
Możemy ewentualnie też wyłączyć sobie kolor backgroundu, jeśli chcemy, żeby
nasza scena była na transparencie.
Wystarczy, że wybierzemy sobie heightpageScroll.
Ja zazwyczaj zostawiam na Yes kursor defaultowy.
Orbit sobie teraz wyłączymy.
PanZoom i soft orbit też sobie włączymy. Co to oznacza?
Że użytkownik nie będzie mógł orbitować wokół naszej ryby?
Poprzez przyciąganie kursora?
Czy nie będzie mógł zoomować naszej ryby?
Jeżeli wybierzemy sobie tutaj jest i na przykład przytrzymamy lewy klawisz
myszy i sobie tutaj będziemy przeciągać, no to możemy się zoomować.
Ale jeżeli ja wybiorę sobie tutaj Play settings, no to teraz
nie będzie tej opcji.
Wróćmy do Play Settings.
Mamy opcje dotykowe. Możemy je zostawić.
Orbitowanie za pomocą dwóch palców.
Przesuwanie za pomocą 3 palce.
Zoom czyli pitching, czyli składanie palców do środka
czy rozszerzanie to jest właśnie to.
Ten gest pozwala nam na zoomowanie page scroll.
Możemy sobie zostawić dalej.
Jeżeli już te ustawienia są dla nas ok, to możemy wybrać update.
Public URL i poczekać chwilkę aż link do naszej sceny się zaktualizuje.
Ok.
Następnie jeżeli przejdziemy do URL.
Mamy tutaj kod, który możemy sobie skopiować, a następnie osadzić go w
powiedzmy Webflow, gdzie nasza scena będzie w pełni interaktywna.
Będzie wyglądać dokładnie tak, jak zaprojektowaliśmy to w SPN i
będzie dokładnie tak samo działać.
Wystarczy, że po prostu skopiujemy ten kod do schowka.
To co jeszcze istotne tutaj to performance, czyli zadbanie o to, żeby
nasza animacja, nasza scena była lekka i ładowała się szybko i
żeby nie obciążała strony.
Możemy wybrać Run test i zobaczyć jak to wygląda.
Nasza punktacja jeśli chodzi o loading time score, czyli czas ładowania
wygląda całkiem fajnie.
Natomiast mamy tutaj delikatne ostrzeżenie o rozmiarze naszej sceny.
Mamy tutaj 1 MB.
Moglibyśmy śmiało zejść poniżej tego megabajta, gdybyśmy na przykład
skompresowali troszeczkę bitmapę naszą bitmapę, którą wykorzystaliśmy do
systemu cząsteczkowego.
Mam tutaj na myśli ten plik PNG z bąbelkami.
Wtedy moglibyśmy mieć tutaj poniżej megabajta i to też zachęciłoby
się nam na zielono.
Przejdźmy tutaj.
Mamy czerwone ostrzeżenie, na które warto zwrócić uwagę.
Mamy informację o tym, że dwa światła na naszej scenie determinują cienie.
Warto je wyłączyć.
Jeżeli teraz ja wyjdę stąd i zaznaczę sobie naszą lampę
a następnie przejdę do jej ustawień i Shadows ustawię na.
No tak samo wybiorę sobie Directional Light i tutaj też cienie ustawię na.
No i teraz mogę przejść do export raz
jeszcze, wybrać sobie run test i wtedy już tego czerwonego ostrzeżenia tutaj nie mam.
Te żółte możemy zignorować, natomiast mamy tutaj informacje o teksturach.
Możemy zredukować liczbę tekstur.
W tym przypadku mamy teraz.
Aktualnie mamy 3, ale możemy też zmniejszyć wagę
wykorzystywanych w tym pliku bitmap.
Wybierzmy update.
Możemy sobie skopiować ten kod i osadzić na przykład naszą scenę w edytorze
stron internetowych, jakim jest Webflow.
Możemy przejść do public URL i na przykład skopiować sobie kod do osadzenia
za pomocą funkcji copy embed.
A no teraz to wszystko w tej lekcji.
Dzięki serdeczne za uwagę i słyszymy się w lekcji następnej.