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.
Hej, cześć. Witam Cię w kolejnej lekcji.
Dodamy teraz światełko.
Wybieram +, a następnie przechodzimy tutaj na sam dół listy i
wybierzemy sobie Point light.
Dodamy sobie tutaj taką prostą lampkę, którą chciałbym troszeczkę edytować.
Mamy teraz ją zaznaczoną, więc możemy zauważyć, że w panelu z referencjami
zupełnie mamy inne opcje.
Zmienimy kolor tej lampy, na przykład na, powiedzmy jakiś.
Jasnoniebieski na przykład.
W ten sposób możemy zwiększyć lub zmniejszyć
intensywność, ale zostawmy na 1.
Możemy zwiększyć lub zmniejszyć dystans. Dystans.
Czyli jeżeli odsuniemy tą naszą lampkę, to ona dalej może gdzieś tam
oświetlać nasze obiekty.
Im większy jest ten dystans, możemy włączyć lub wyłączyć cienie.
Jeżeli wybierzemy sobie, no to po prostu to światło nie będzie
rzucać cieni w taki sposób, że jeżeli oświetli na przykład tą płetwę, to
płetwa gdzieś tutaj rzuci cień na body.
Tak możemy zostawić.
Jest, jeżeli te cienie gdzieś tutaj występują, no to możemy
je troszeczkę rozmiękczyć.
Widzimy, że mamy tutaj cień na tych okularach.
Zwróćmy uwagę, że jeżeli ja przesuwam naszą lampkę, no to też tutaj
jakiś cień się pojawia i możemy.
Jeżeli zwiększymy wartość radius, to ten cień się rozmywa.
Fajnie to wygląda i myślę, że jeśli chodzi o ustawienie
naszej lampki, to tak zostawimy, ale chciałbym dodać do tego
światła jakąś interakcję.
Wybierzmy sobie event, a następnie rozwijam listę i chciałbym tutaj
wybrać follow, czyli podążanie.
Chciałbym, żeby nasza lampka podążała za kursorem i w zasadzie nic
tutaj nie będziemy zmieniać.
Po prostu wybierzemy sobie play.
I widzimy, że.
Nasza lampka ładnie tutaj oświetla rybę.
Jeżeli przechodzimy kursorem z prawej strony, to widzimy, że to niebieskie
światło pojawia się z prawej strony.
Jeżeli przejdziemy na lewą stronę, to widzimy, że tutaj to
światło oświetla rybkę z lewej strony, również od góry czy od dołu.
Bardzo fajnie to wygląda.
Ok, myślę, że możemy to tak zostawić. Wygląda to fajnie.
Mamy włączoną opcję Reset, więc jeżeli kursorem zjedziemy z ekranu to światło
wraca do swojej defaultowej pozycji.
Czyli dokładnie tu.
Jeżeli wybierzemy sobie reset to światło po prostu zatrzyma się.
Jeżeli mamy kursor z tej strony i oświetla on rybę tutaj
od góry, a ja zjadę sobie kursorem ze sceny to światło tutaj zostaje.
Ok. Mamy kolejny event event follow.
A teraz w tej krótkiej lekcji to wszystko.
Dzięki za uwagę i do usłyszenia po przerwie.