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, jesteśmy w spline.
Stworzyłem nowy plik tutaj tą domyślną płaszczyznę sobie usunę,
nie będzie mi potrzebna.
Mamy tylko lampkę i w tej lekcji będę chciał porozmawiać o tak zwanych obiektach
predefiniowanych, czyli takich wbudowanych obiektach, które mają swoje
specyficzne właściwości.
I takim najlepszym, najprostszym i jednocześnie przykładem
jest Cube, czyli kostka.
Możemy ją dodać klikając tutaj, albo ewentualnie możemy rozwinąć
listę obiektów z biblioteki i wybrać właśnie naszą kostkę Cube.
Klikam i kostka jest już umieszczona.
Jest to obiekt predefiniowany, który ma który ma tutaj w prawym panelu kontrolnym
sporo ciekawych właściwości, takich jak na przykład stopień zaokrąglenia i dokładność
tego zaokrąglenia, czyli corner sites. Jeżeli.
Jeżeli tutaj ustawimy dosyć małą wartość, no to będziemy widzieć taki poligonalny,
kanciasty kształt tego obiektu.
Ale im bardziej zwiększamy tą wartość, tym ładniej nam się to wygładza.
Naturalnie możemy skalować nasz obiekt i ewentualnie dobudować mu ilość
płaszczyzn z każdej strony, np.
Tutaj jeśli przy X ustawiłem sobie 9 lub Y ustawiłem 10, to te płaszczyzny,
które są położone na osi Y będą zbudowane ze 100 takich kafelków, czyli 10x10.
10 x 10 daje nam 100.
A jak możemy się o tym przekonać?
Na przykład możemy wybrać sobie wybrać sobie Smooth Edit No i faktycznie
mamy tutaj 10 x 10 takich kafelków.
Także w taki sposób nasz obiekt został zbudowany.
Wybierzmy CommandSet i dzięki temu, że przeszedłem do
trybu Smooth to możemy zobaczyć jak wygląda konstrukcja tego naszego bloku.
Do tego jeszcze przejdziemy, bo będziemy dużo pracować z trybem Smooth and edit,
ale na razie to wyłączmy i usuńmy sobie naszą kostkę.
Wybierzemy raz jeszcze ikonkę plusa I tutaj wybierzemy sobie na
przykład taki obiekt jak cylinder.
Ustawimy go sobie.
Tutaj mogę przytrzymać klawisz Shift i wtedy tworzę proporcjonalnie taki obiekt,
czyli jest on tutaj idealnie zaokrąglony.
No i taki obiekt jako obiekt predefiniowany ma już
znacznie więcej możliwości.
Możemy na przykład zmniejszyć sobie tą podstawę tego obiektu,
możemy też ewentualnie zmniejszyć wierzchołek.
Naturalnie możemy sobie zwiększyć ilość płaszczyzn po bokach.
Im więcej tych płaszczyzn, tym nasz obiekt będzie bardziej wygładzony.
Im mniej to oczywiście będzie bardziej kanciasty.
Naturalnie możemy zwiększyć zaokrąglenie lub zmniejszyć i tak samo jak w przypadku
Cube, mamy tutaj cornerside, czyli możemy zwiększyć ilość płaszczyzn, z których
to zaokrąglenie jest zbudowane.
To co jest jeszcze fajnym tutaj rozwiązaniem to hollow, czyli taki otwór
wewnątrz tego obiektu możemy zobaczyć, że nasz obiekt właśnie ma taki otwór w środku
i to właśnie jest możliwe dzięki tej opcji.
Hollow Angle to też fajne rozwiązanie, które po prostu pozwala nam albo zapełnić
ten obiekt w całości, albo ewentualnie doprecyzować jakiś konkretny kąt.
Każdy z tych obiektów predefiniowanych ma właśnie takie opcje
i będziemy również korzystać z takich obiektów, ale możemy też
modelować własne obiekty.
Na przykład jeżeli wybierzemy sobie piramidę,
stworzymy sobie taką piramidkę tutaj, no to też możemy na przykład
zdecydować, jaką ilość boków ma mieć ta piramida i też czy ma być zaokrąglona i
jak ma to zaokrąglenie wyglądać.
Kolejnym obiektem predefiniowanym jest tutaj oczywiście bardzo dużo.
Warto przetestować poszczególne.
Ale na przykład mamy taki obiekt jak Torus, czyli taki swego rodzaju pierścień,
który też ma bardzo fajne rozwiązania.
Grubość tuby mamy tutaj.
Ewentualnie ilość płaszczyzn, w których taka tuba jest zbudowana.
11.
Widzimy, że im mniej, tym nasz obiekt wygląda bardziej poligonalnie.
Dalej Radiosites też możemy sobie tutaj zmniejszyć lub zwiększyć ilość płaszczyzn.
Ewentualnie możemy sobie też przyciąć ten obiekt i jeśli chcemy możemy sobie
zaokrąglić kanciaste krawędzie.
I tutaj też mamy cornerside.
Także jeżeli będziemy potrzebować takich obiektów, są one oczywiście
do naszej dyspozycji.
Natomiast w lekcji następnej ja będę chciał pokazać Ci jak
modelować własne obiekty.
Jak tworzyć własne obiekty.
Oczywiście będziemy rozpoczynać.
Każde modelowanie będziemy rozpoczynać od jakiegoś obiektu, który już tutaj mamy,
ale będziemy przechodzić w tryb Smooth edit tak, żebyśmy mogli sterować
poszczególnymi płaszczyznami, krawędziami i tudzież vertexami.
A teraz to wszystko w tej lekcji.
Dzięki serdeczne i słyszymy się za chwilę.