Spline 3D: Funkcja Look at
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.
W tej lekcji dodamy kolejną interakcję do naszego modelu, którą
możemy teraz podejrzeć.
Wygląda to tak, że oczy podążają za kursorem i jest to
bardzo prosta interakcja wbrew pozorom.
Pokażę teraz.
Pokażę Ci teraz jak to możemy zrobić, więc wracam tutaj.
Mamy tutaj dwie sfery oko prawe oraz oko lewe.
To co ja będę chciał zrobić, to teraz.
Nie będziemy dodawać żadnego stanu.
Skupimy się tylko na dodawaniu eventu.
Wybieram ikonkę plusa, a następnie rozwijam listę tutaj z interakcjami
i będzie to look at, czyli patrz na.
I naszym targetem będzie kursor.
Czyli te oczy będą patrzeć na kursor na jego pozycję.
Następnie mamy tutaj coś takiego jak plane distance.
I Direction distance.
Im mniejszą wartość wpiszemy, ten obiekt będzie bardziej wyczulony na ruch kursora.
Na przykład wpiszmy tutaj powiedzmy 100.
I teraz, jeżeli wybiorę sobie play, no to widzimy, że no nie działa to do
końca tak, jak byśmy chcieli, Więc musimy tutaj zwrócić uwagę
na Direction wybierzmy sobie X.
I teraz wygląda na to, że działa.
Jak mówiłem przed chwilą, im mniejsza wartość, tym nasze oko będzie
bardziej wyczulone na ruch kursora. I faktycznie.
Ten ruch jest nawet nienaturalny, bo widzimy, że bardzo mocno
spogląda w prawą stronę. To oko.
Tak, dlatego możemy zwiększyć tą wartość i to oko nie będzie już
tak bardzo wyczulone.
Możemy wpisać tutaj 500.
I teraz widzimy, że już to oko tak bardzo mocno nie skręca.
Tak, widzimy też, że jeżeli ja zjadę z naszej
sceny, to oko się zresetuje Resetuje do swojej defaultowej pozycji,
ale możemy to zmienić.
Wystarczy, że wybierzemy tutaj nowy reset.
I teraz jeżeli ja gdzieś zjadę tutaj z naszego pola, no to widzimy, że oko dalej
jakby oko pozostaje w tej pozycji, w której było.
Kiedy ja zjechałem kursorem z naszego ekranu, tak wracam i tutaj
oko dalej podąża za kursorem.
No dobra, ale powinniśmy to samo zrobić z drugim okiem.
Dlatego zaznaczamy sobie teraz drugą sferę.
I tutaj robimy dokładnie to samo, czyli dodajemy sobie event
oparty o interakcję look at.
Targetem jest nasz kursor.
Oczywiście możemy też.
Ustawić target.
Jako target inny obiekt w naszej scenie.
I możemy do takiego obiektu przypisać event.
Drag and drop.
Jeżeli na przykład złapiemy za jakiś obiekt i będziemy nim przesuwać, bo jest
też to możliwe, to wtedy oko będzie podążać za tym obiektem.
Ale wybieramy tutaj kursor i plane distance ustawiamy tak samo, czyli na 500.
I teraz wybieram play.
No i widzimy, że coś tu nie działa tak z tym okiem po drugiej stronie, więc na
pewno będziemy musieli tutaj wybrać reset i zmienić na przykład Direction na X.
Zobaczymy jak to teraz zadziała.
O i wygląda na to, że teraz te oczy bardzo fajnie tutaj podążają za naszym kursorem
I dokładnie o coś takiego mi chodziło.
Jest to dokładnie taka interakcja jaką chciałem wykorzystać.
Ale to jeszcze nie wszystko, bo chciałbym dodać tą funkcję looked tą interakcję
do całej naszej ryby, nie tylko do oczu.
Tak, chciałbym, żeby oczy niezależnie, niezależnie tutaj wędrowały za naszą
myszą, za naszym kursorem, ale chciałbym, żeby całe bot naszej
ryby też tak działało.
Tym zajmiemy się w lekcji następnej.
Zatem zapraszam Ci teraz na krótką przerwę.