Spline 3D: System cząsteczkowy
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.
Byłoby super moim zdaniem, gdyby z ust naszej rybki uwalniały się jakieś
bąbelki i w tym celu skorzystamy z tak zwanego systemu cząsteczkowego.
Teraz musimy wybrać z listy tzw.
particle emiter, emiter, emiter cząsteczek i domyślnie jest to taka kwadratowa
płaszczyzna, która emituje takie gradientowe, różowe, żółte cząsteczki.
Jeżeli mamy zaznaczone taki emiter, możemy przejść tutaj do panelu z właściwościami i
przede wszystkim możemy ustawić sobie najpierw kolory.
Domyślnie tak jak wspomniałem różowy i pomarańczowy.
Kolory możemy ustawić na random i wtedy ten gradient jest taki bardziej losowy.
Możemy zwiększyć lub zmniejszyć rozmiar takich cząsteczek,
dodać im rotację barw rate.
Tutaj zwiększamy ilość wytwarzanych cząsteczek i lifetime,
czyli czas życia takiej pojedynczej.
Cząsteczki w tym momencie ustawione są na jedną sekundę, czyli po jednej sekundzie
od pojawienia się, taka cząsteczka znika.
Mamy teraz Alpha White, gdzie możemy na przykład ustawić constant
i w tym momencie cząsteczki są w stu procentach widoczne od
urodzenia się do zniknięcia.
Ale możemy na przykład ustawić tutaj easy in easy out.
I teraz cząsteczka, kiedy się pojawia, to jest to ustawioną transparentność na 0
i kiedy znika, no to ta transparentność przechodzi od 100% do zera.
Następnie jeśli chodzi o rozmiar to mamy linear fade out, czyli
cząsteczka w miarę trwania swojego żywota, jeśli możemy to tak nazwać, po prostu
płynnie się zmniejsza aż do zera.
Ale możemy na przykład wybrać easy in out.
I teraz wygląda to tak, że nasza cząsteczka, kiedy się rodzi,
będę używał takich, takiej nomenklatury.
Kiedy się rodzi, jest ustawiona i rozmiar ustawiony jest na
0 i ona po prostu rośnie, a potem znowu się zmniejsza do zera.
Więc tak to wygląda.
Możemy oczywiście zwiększyć prędkość tych cząsteczek.
Możemy następnie ustawić orientację samego emitera tak, żeby
cała płaszczyzna, cała płaszczyzna tego emitera robiła te cząsteczki.
To się przydaje, kiedy na przykład nasz emiter jest jakimś kształtem, np.
Sferą?
Tak, jeśli wybierzemy Axis, to cząsteczki lecą do góry jakby jak wygląda tak jakby
urodziły się ze środka naszego obiektu.
Ale jeżeli wybierzemy Surface, no to jakby cała powierzchnia tego
obiektu rodzi te cząsteczki.
Wybierzmy na razie Axis.
Możemy ustawić kierunek ulatnianie się tych cząsteczek.
Chociaż na kierunek najbardziej wpływa grawitacja.
Jeżeli ustawimy tą grawitację na przykład na minus, no to wtedy te
cząsteczki będą spadać.
Jeżeli gdzieś tam damy tą grawitację większą, no to one wtedy
łatwiej ulatniają się do góry.
Mamy też image. Możemy sobie tutaj wybrać.
Opcję i zobaczyć jak nasze cząsteczki mogą wyglądać domyślnie.
W momencie kiedy dodamy taki podstawowy emiter.
Cząsteczki wyglądają w ten sposób, ale mogą na przykład wyglądać
tak albo albo tak.
Czy ewentualnie może to być jakiś rodzaj dymu?
Spróbujmy może z czymś takim.
Natomiast tych cząsteczek teraz jest zdecydowanie za dużo.
Dlatego musimy zmniejszyć ratę na przykład do powiedzmy 27.
Kolor może ustawmy na taki jakiś bardziej fioletowy.
Okej.
tutaj może bardziej niebieski.
W porządku, jeśli chodzi o rozmiar tych cząsteczek.
One są za duże, więc możemy to śmiało zmniejszyć.
Prędkość też możemy zmniejszyć i teraz nasze cząsteczki wyglądają w ten sposób.
Całkiem ok.
A my Time mamy ustawiony na Infinity, czyli cząsteczki uwalniają się
cały czas w nieskończoność.
Ale możemy na przykład wybrać sobie tutaj.
One time i wtedy cząsteczki urodzą się raz, a następnie umrą i
dalej już się nic nie dzieje.
Tak, wybierzmy sobie Infinity, czyli na razie w nieskończoność.
Dalej tutaj mamy takie fajne opcje jak.
Particle Noise.
Możemy na przykład ustawić sobie Simplex i wtedy jeśli zwiększymy tą wartość to te
cząsteczki zachowują się bardziej nieprzewidywalnie.
Wybierzmy sobie Karol. Zmniejszmy te wartości.
Niech te nasze cząsteczki uwalniają się ładnie do góry.
Ok.
Ten emiter jest troszeczkę za duży, więc możemy zmniejszyć jego rozmiar
na przykład w ten sposób.
Następnie możemy go ustawić tak, żeby był.
Gdzieś tu bliżej ust naszej ryby, ale widzimy, że on jakby.
Te cząsteczki troszeczkę nam wylatują w tą naszą rybę, w zasadzie w okulary.
Więc możemy tutaj przejść do.
Direction i na przykład przestawić się bardziej na Zet.
Okej.
I wtedy już lecą troszeczkę bardziej przed naszą rybę i nie wylatują już nam
do wody naszej ryby. Tak.
Jeśli chodzi o lifetime, to może zwiększmy Lifetime do powiedzmy 4 sekund.
Ok.
Widzimy, że tutaj te cząsteczki troszkę dziwnie się zachowują.
One opadają, więc.
Możemy przejść tutaj do Particle force i grawitację ustawić na plus.
Cząsteczki na samym początku są niewidoczne dlatego, że
Alphawhite mamy ustawione na easy in easy out, więc możemy sobie na
przykład wybrać fade out.
I jeśli chodzi o rozmiar, no to wybierzmy sobie tutaj na przykład line fade out.
Również.
Teraz wygląda to fajnie.
Możemy wybrać sobie particle randomness, czyli losowość skali, tak żeby
cząsteczki miały różne rozmiary.
Widzimy, że jedne są większe, inne są mniejsze.
Też to fajnie wygląda.
Następnie przejdziemy sobie tutaj.
Coloring ustawimy na blend.
Rozmiar czy zwiększać?
Myślę, że możemy zostawić birth rate, czyli ilość cząsteczek, które się rodzą.
Ustawmy może na 15.
W porządku, teraz ten emiter musimy dodać do naszej grupy, na
przykład do grupy Fish. Czyli tutaj.
I teraz jeżeli ja wybiorę sobie Play, no to widzimy, że ten emiter
podąża za naszą rybą.
Dzięki temu cały czas te cząsteczki emitują się z ust naszej ryby.
Dokładnie o coś takiego chodziło.
Ale chciałbym jeszcze zrobić tutaj jedną rzecz.
Mianowicie chciałbym sterować tymi cząsteczkami w taki sposób, żeby nie
uwalniały się one cały czas, a tylko i wyłącznie w momencie, kiedy ja,
powiedzmy dodam jakąś interakcję, tak?
Czyli jeżeli ja coś zrobię z naszą rybą, wtedy chciałbym, żeby ona
jakby uwalniała te cząsteczki.
Co możemy tutaj zrobić?
Zaznaczymy all objects, a następnie dodamy tutaj event.
Możemy do jednej grupy dodać kilka eventów.
Tak samo do pojedynczego obiektu możemy dodać kilka eventów i chciałbym, żeby ten
event dział się w momencie kiedy najedziemy myszą na naszą na
naszą rybkę czyli mouse hover.
Co się wtedy będzie działo?
Wybieramy sobie Particle control jako akcję i po prostu wtedy
musimy sobie wybrać nasz emiter Particle emiter to jest dokładnie ten Okej
i emission ustawiamy na start.
Teraz nie będzie to teraz nie będzie to do końca działać tak, jakbyśmy chcieli.
Widzimy, że cały czas te cząsteczki są emitowane.
Dlatego zaznaczmy sobie particle emiter.
Możemy go nazwać na przykład bubbles, czyli bąbelki.
I to, co tutaj chciałbym zrobić, to wyłączymy sobie Auto play i emiter time.
Możemy sobie ustawić na Onetime, czyli tylko raz.
I teraz jeżeli wybierzemy sobie play, no to widzimy, że te cząsteczki
się nie uwalniają.
Ale kiedy ja najadę kursorem na rybę, no to widzimy, że są uwalniane.
Bardzo fajnie.
Jeszcze ostatnia rzecz w tej lekcji, Mianowicie przejdźmy sobie tutaj do image.
I tutaj chciałbym, żebyśmy załadowali taki obrazek PNG z bąbelkami.
I tutaj mam taki plik PNG jest bardzo lekki 327 kilobajtów.
Jeżeli ładujemy to jakikolwiek bitmapy, jakiekolwiek tekstury
do naszej sceny spline dbajmy o to, żeby one były naprawdę lekkie.
Dlatego ja teraz tutaj po prostu wybieram sobie plus, a następnie klikam
tutaj w suwaki Replace Image.
I wybieram nasz bąbelek. Wybieram open.
I teraz wybieram play.
Najeżdżam kursorem na rybę i widzimy, że faktycznie te bąbelki się uwalniają, ale
mają takie kolory, jakie ja zadałem tutaj w właściwościach cząsteczek.
Więc możemy na przykład sobie ustawić tutaj powiedzmy jakiś bardziej.
Taki różowy. Zobaczmy teraz o, myślę, że dużo fajniej.
Super, dokładnie, o coś takiego mi chodziło, więc myślę,
że na teraz to wszystko.
W tej lekcji możemy śmiało przejść do lekcji następnej.