Konfigurator garniturów online - klient przychodzi do salonu już zdecydowany
Klient: Signor Leone
Branża: Moda / FashionTech
Spline - czym jest i jak wykorzystać 3D na stronie internetowej
Spline to narzędzie do projektowania interaktywnych scen 3D w przeglądarce, które można osadzić na stronie bez pisania silnika grafiki od zera. Pokazujemy, jak trafia na stronę, pięć sposobów jego użycia z różnym obciążeniem dla szybkości strony i kiedy lepiej zostać przy zdjęciu lub wideo.
CEO
02 wrz 2026
Obracający się produkt w nagłówku strony, który reaguje na ruch kursora. Ilustracja, która składa się na oczach użytkownika, gdy przewija stronę. Jeszcze kilka lat temu każdy taki element oznaczał tygodnie pracy programisty grafiki. Spline to narzędzie, które przenosi większość tej pracy do edytora wizualnego, przypominającego programy do projektowania interfejsów.
Łatwiejsze nie znaczy jednak darmowe dla strony. Każda scena 3D coś waży, obciąża telefon użytkownika i może spowolnić pierwsze wyświetlenie strony. Różnica między efektownym a męczącym 3D zwykle nie leży w samym narzędziu, tylko w decyzji, gdzie i po co go użyć.
Spline - czym jest i skąd jego popularność
Spline to aplikacja do projektowania grafiki 3D, która działa w przeglądarce. Projektant układa w niej obiekty i ustawia światło, a potem dodaje animacje i proste interakcje, na przykład obrót po najechaniu kursorem albo ruch zależny od przewijania. Kilka osób może pracować nad tą samą sceną jednocześnie, podobnie jak w Figmie.
Pod spodem działa WebGL, czyli technologia, dzięki której przeglądarka rysuje grafikę 3D z pomocą karty graficznej. Ta sama, z której korzysta biblioteka Three.js. Różnica polega na tym, kto i jak tworzy scenę. W Three.js robi to programista, pisząc kod. W Spline robi to projektant, przesuwając obiekty myszką, a kod powstaje przy eksporcie. Stąd popularność wśród zespołów projektowych. Ten, kto wymyśla wygląd sceny, może ją sam zbudować i dopracować, zamiast opisywać ją programiście. Modele z bardziej rozbudowanych programów, takich jak Blender, można zaimportować i ożywić już w Spline.
Powiązane realizacje
Jak scena trafia na stronę
Gotową scenę można przenieść na stronę na kilka sposobów, a wybór ma znaczenie dla szybkości i możliwości.
Najprostszy to publiczny link osadzony w ramce (iframe). Działa wszędzie, także w kreatorach takich jak Webflow czy Framer, ale scena jest wtedy w osobnym oknie i nie wie, co dzieje się na reszcie strony. Drugi sposób to Spline Viewer, czyli gotowy znacznik HTML wklejany bezpośrednio w kod strony. Według dokumentacji Spline pozwala on scenie reagować na ruch myszy i przewijanie w obrębie całej strony, a domyślnie ładuje się dopiero wtedy, gdy znajdzie się w widoku. Trzecia droga, najczęstsza w projektach programistycznych, to eksport do kodu. Spline przygotowuje go w wersji dla czystego JavaScriptu, dla Reacta, dla Next.js oraz dla Three.js. Plik sceny można trzymać na własnym serwerze zamiast na serwerach Spline. A programista może łączyć scenę z resztą strony: reagować w kodzie na kliknięcie obiektu albo zmieniać scenę, gdy użytkownik wybierze coś w formularzu.
Przy stronach budowanych w Next.js, z treściami zarządzanymi w CMS, ta trzecia droga daje najwięcej kontroli nad tym, kiedy i jak scena się ładuje.
Jak wykorzystać 3D na stronie internetowej: pięć zastosowań
Nie każde 3D obciąża stronę tak samo. Poniżej pięć zastosowań, które widujemy najczęściej, od najlżejszego do najcięższego.
Ilustracje i ikony renderowane do obrazu
Najprostsze użycie Spline w ogóle nie wymaga 3D na żywo. Projektant tworzy obiekty w Spline, ustawia światło i eksportuje gotowe obrazki lub krótkie wideo. Na stronie trafiają jako zwykłe pliki graficzne. Efekt jest trójwymiarowy, a strona waży tyle, co przy zwykłych ilustracjach.
Obciążenie strony: znikome.
Obiekt w nagłówku reagujący na kursor
Najpopularniejsze zastosowanie na stronach firmowych i produktowych. Jeden obiekt, na przykład produkt albo abstrakcyjna forma w kolorach marki, obraca się lekko za kursorem. Dobrze sprawdza się na landing page, gdzie pierwsze wrażenie ma duże znaczenie.
Obciążenie strony: średnie. Scena jest zwykle w pierwszym widoku, więc ładuje się od razu i konkuruje z tekstem nagłówka o czas pierwszego wyświetlenia.
Produkt do obejrzenia z każdej strony
Użytkownik obraca model mebla albo urządzenia, przybliża detale i przełącza kolory. Przydaje się w sprzedaży, zwłaszcza przy produktach, których nie da się dotknąć przed zakupem. Na stronie produktu w sklepie internetowym taki model często zastępuje kilka zdjęć z różnych stron.
Obciążenie strony: średnie do dużego, zależnie od szczegółowości modelu i tekstur.
Scena opowiadana przewijaniem
Obiekt rozkłada się na części, kamera przelatuje przez wnętrze urządzenia, kolejne sekcje tekstu pokazują kolejne ujęcia. To odmiana animacji przewijanych, tyle że w trzech wymiarach. Robi wrażenie przy premierach produktów i kampaniach.
Obciążenie strony: duże. Scena pracuje przez cały czas przewijania, więc słabsze telefony odczuwają to najmocniej.
Konfigurator z ceną i zamówieniem
Klient wybiera warianty, widzi zmiany na modelu 3D i od razu zna cenę. Tu Spline zwykle przestaje wystarczać sam. Logika wariantów, ceny, stany magazynowe i koszyk wymagają kodu i połączenia ze sklepem. Spline może dostarczyć scenę, ale konfigurator produktów to już osobny projekt programistyczny.
Nie każdy konfigurator potrzebuje 3D. Dla marki Signor Leone zbudowaliśmy konfigurator garniturów z realistycznym podglądem 2D tkanin, kroju i dodatków. Klienci przychodzą do salonu z gotową konfiguracją, a podgląd 2D wystarczył, żeby zbudować zaufanie do wyboru.
Obciążenie strony: zależne od modelu, ale projekt jest najbardziej złożony z całej piątki.
Największy wpływ na szybkość ma położenie sceny, nie jej złożoność
Scena w nagłówku ładuje się zawsze i natychmiast, bo jest w pierwszym widoku. Równie efektowna scena umieszczona niżej na stronie może ładować się leniwie, dopiero gdy użytkownik do niej przewinie. To jedna decyzja projektowa, która zmienia wyniki Core Web Vitals bardziej niż tygodnie optymalizacji modelu.
Ile waży 3D i jak nie spowolnić strony
Scena 3D na stronie to biblioteka, która ją wyświetla, oraz plik sceny z modelami i teksturami. Oba trzeba pobrać, a potem karta graficzna telefonu musi to wszystko narysować. Na mocnym komputerze tego nie widać. Na trzyletnim telefonie z Androidem w słabym zasięgu - bardzo.
Google ocenia szybkość stron wskaźnikami Core Web Vitals. Dwa z nich są szczególnie wrażliwe na 3D. Largest Contentful Paint (LCP) mierzy, jak szybko pojawia się główna treść widoku, a ciężka scena w nagłówku potrafi go opóźnić. INP mierzy, jak szybko strona reaguje na kliknięcie, a zajęty rysowaniem procesor odpowiada wolniej.
Ryzyko da się ograniczyć kilkoma zasadami:
- obrazek zastępczy w miejscu sceny, widoczny od razu, a scena ładowana dopiero po wyświetleniu tekstu,
- ładowanie scen położonych niżej dopiero wtedy, gdy użytkownik do nich przewinie,
- uproszczone modele i mniejsze tekstury, bo różnicy w liczbie wielokątów nikt nie zobaczy, a różnicę w czasie ładowania zobaczy każdy,
- osobna, lżejsza wersja albo zwykłe zdjęcie na telefonach, jeśli scena nie działa płynnie na średnim urządzeniu,
- pomiar przed i po wdrożeniu, na prawdziwych telefonach, a nie tylko w narzędziach na komputerze projektanta.
Animacje i ruch mogą przeszkadzać - scena musi respektować prefers-reduced-motion
Część użytkowników ma wrażliwość na ruch na ekranie i włącza w systemie opcję ograniczenia animacji. Scena 3D powinna to respektować: zatrzymać animację lub zamienić się na statyczny obraz. Najważniejsze informacje na stronie nie mogą być dostępne wyłącznie za pośrednictwem interaktywnej sceny.
Spline, Three.js czy zwykłe wideo
Spline nie jest jedynym sposobem na 3D w przeglądarce. Three.js i Babylon.js to biblioteki dla programistów, które dają pełną kontrolę nad sceną i wydajnością, ale każdy szczegół trzeba zakodować. Sprawdzają się w złożonych projektach, takich jak konfiguratory z setkami wariantów albo wizualizacje danych w 3D. Spline wygrywa szybkością pracy przy scenach, które projektuje się bardziej, niż programuje - jak obiekt w nagłówku czy prezentacja produktu. Zespół projektowy może poprawiać scenę bez angażowania programisty przy każdej zmianie.
Czasem najlepszą odpowiedzią jest brak 3D na żywo. Wideo nagrane ze sceny albo animacja w lekkim formacie, takim jak Lottie czy Rive, daje podobne wrażenie przy ułamku obciążenia. Jeśli użytkownik ma tylko oglądać, a nie obracać, interaktywna scena często nie jest potrzebna.
Spline w projekcie: kto co robi i ile to kosztuje
Samo narzędzie jest tanie w porównaniu z kosztem pracy. Według cennika Spline (stan na październik 2026) plan Free pozwala eksportować sceny ze znakiem wodnym. Plan Hobby, który usuwa znak wodny i nie ogranicza liczby plików, kosztuje 12 USD miesięcznie przy płatności rocznej lub 15 USD miesięcznie. Pro kosztuje odpowiednio 25 lub 30 USD i dodaje między innymi eksport wideo. Plany różnią się też liczbą kredytów na funkcje AI.
Większa część budżetu idzie na ludzi. Scenę projektuje projektant znający 3D, często w ramach szerszego projektowania UX/UI strony. Wdrożenie, optymalizacja i połączenie sceny z resztą strony to praca programisty front-end przy tworzeniu strony internetowej. Prosta scena w nagłówku zajmuje zwykle od kilku dni do dwóch tygodni pracy obu osób. Scena opowiadana przewijaniem albo prezentacja produktu z wariantami to raczej kilka tygodni.
Te widełki zależą przede wszystkim od tego, czy modele produktów już istnieją. Jeśli trzeba je dopiero zbudować od zera na podstawie zdjęć i rysunków technicznych, czas wydłuża się wyraźnie.
Powiązane usługi
Kiedy 3D nie jest dobrym pomysłem
Bywają strony, na których scena 3D przeszkadza. Strona usługowa, na której użytkownik szuka cennika i telefonu, nie zyska na obracającym się obiekcie, a może stracić na szybkości. Strona, którą większość osób odwiedza z telefonu w drodze, ma inne priorytety niż prezentacja premierowa oglądana na dużym ekranie. Ostrożnie trzeba też podchodzić do dostępności. Animacje i ruch mogą przeszkadzać części użytkowników, dlatego scena powinna respektować ustawienie systemu ograniczające ruch, a najważniejsze informacje nie mogą być dostępne wyłącznie w 3D.
Dobra scena 3D odpowiada na konkretne pytanie: co użytkownik ma dzięki niej zrozumieć szybciej niż ze zdjęcia. Jeśli odpowiedź jest jasna, Spline pozwala zrealizować ją sprawnie. Jeśli nie, lepiej wydać budżet na treść i szybkość strony. W ramach web developmentu pomagamy podjąć tę decyzję, zanim powstanie pierwsza scena, a o konkretnym pomyśle możemy porozmawiać bezpośrednio.
FAQ
FAQ - Najczęściej zadawane pytania o Spline
- Tak, Spline ma darmowy plan, który pozwala projektować sceny 3D i osadzać je na stronie, ale eksportowane sceny mają wtedy znak wodny Spline. Do testów i nauki to wystarcza, natomiast na stronie firmowej znak wodny zwykle jest nie do przyjęcia. Według cennika z października 2026 roku najtańszy plan bez znaku wodnego, Hobby, kosztuje 12 USD miesięcznie przy płatności rocznej lub 15 USD przy miesięcznej, a plan Pro 25 lub 30 USD i dodaje między innymi eksport wideo. Plany różnią się też liczbą kredytów na funkcje oparte na AI. Wybór planu zależy od tego, ile osób pracuje nad scenami i czy potrzebny jest eksport do wideo lub aplikacji mobilnych.
- Tak, sceny ze Spline działają w przeglądarkach na telefonach, ponieważ korzystają z WebGL, który obsługują współczesne urządzenia mobilne. To, czy scena działa płynnie, zależy jednak od jej złożoności i od klasy telefonu. Prosty obiekt w nagłówku zwykle działa dobrze nawet na tańszych urządzeniach, a szczegółowy model z wieloma teksturami i animacją sterowaną przewijaniem potrafi zacinać się na kilkuletnich telefonach z Androidem. Dlatego przed publikacją scenę testuje się na prawdziwych, przeciętnych telefonach, a w razie potrzeby przygotowuje lżejszą wersję mobilną albo zastępuje ją na małych ekranach obrazkiem lub wideo. Ostateczna decyzja zależy od tego, jak duża część ruchu na stronie pochodzi z telefonów.
- Tak, strona ze sceną 3D może mieć dobre wyniki Core Web Vitals, jeśli scena jest ładowana w przemyślany sposób. Najważniejsze jest, żeby nie blokowała wyświetlenia głównej treści: w miejscu sceny od razu pojawia się lekki obrazek zastępczy, a sama scena ładuje się dopiero po pokazaniu tekstu. Sceny położone niżej na stronie ładuje się dopiero wtedy, gdy użytkownik do nich przewinie. Przykładowo obiekt 3D w nagłówku strony produktowej może wyglądać od pierwszej sekundy jak zwykła grafika, a interaktywność włącza się chwilę później, niezauważalnie dla użytkownika. Wynik zależy od wagi modelu, liczby scen na stronie i od tego, czy optymalizację zaplanowano od początku, a nie po wdrożeniu.
- Tak, scenę ze Spline można dodać do strony na WordPressie, Webflow, Framerze i większości innych platform. Najprostsza metoda to wklejenie kodu osadzenia z publicznym linkiem albo znacznika Spline Viewer w bloku HTML, co nie wymaga programowania. Przy stronach budowanych w kodzie, na przykład w React lub Next.js, scenę eksportuje się jako komponent, co daje większą kontrolę nad ładowaniem i pozwala łączyć ją z resztą strony. W kreatorach stron trzeba pamiętać, że osadzona scena ładuje dodatkową bibliotekę, więc jej wpływ na szybkość strony warto sprawdzić po publikacji. Wybór metody zależy od platformy i od tego, czy scena ma reagować na to, co dzieje się poza nią.
- Tak, do Spline można zaimportować modele przygotowane w Blenderze i innych programach 3D, najczęściej w popularnych formatach wymiany, takich jak glTF lub OBJ. Po imporcie w Spline dodaje się oświetlenie, materiały, animacje i interakcje, czyli to, co sprawia, że model ożywa na stronie. To typowy podział pracy: szczegółowy model produktu powstaje w specjalistycznym programie albo na podstawie dokumentacji producenta, a scenę na stronę składa się w Spline. Przed importem modele zwykle się upraszcza, bo pliki przygotowane do renderingu filmowego są zbyt ciężkie dla przeglądarki. Zakres tej pracy zależy od tego, jak szczegółowy jest model źródłowy i jak duże tekstury zawiera.
- Przygotowanie sceny 3D na stronę trwa zwykle od kilku dni przy prostym obiekcie w nagłówku do kilku tygodni przy prezentacji produktu lub scenie sterowanej przewijaniem. Na ten czas składa się projekt sceny, przygotowanie lub uproszczenie modeli, animacje i interakcje, a po stronie programisty osadzenie na stronie, optymalizacja i testy na różnych urządzeniach. Najwięcej czasu zabiera zwykle budowa modeli od zera, gdy firma nie ma gotowych plików 3D swoich produktów. Koszt zależy więc przede wszystkim od tego, czy modele istnieją, ile scen ma powstać i czy muszą być połączone z innymi elementami strony, na przykład z wyborem wariantu produktu w sklepie.
- Tak, Spline nadaje się do warstwy wizualnej konfiguratora, czyli sceny 3D, w której zmieniają się kolory, materiały lub elementy produktu. Sam konfigurator wymaga jednak kodu, który obsługuje logikę wariantów, przelicza cenę, sprawdza dostępność i przekazuje wybraną konfigurację do koszyka lub zamówienia. Programista łączy scenę ze Spline z tą logiką przez interfejs programistyczny, na przykład zmieniając materiał obiektu po wyborze opcji w formularzu. Przy produktach z setkami wariantów i dużą liczbą zależności lepszym wyborem bywa scena budowana bezpośrednio w Three.js albo dobry podgląd 2D. Wybór zależy od liczby wariantów, roli wyglądu w decyzji zakupowej i budżetu projektu.
Blog
Powiązane artykuły
Front-end
WebGL: Wprowadzenie i możliwości
WebGL, krótko mówiąc, to rendery graficzne oparte na przeglądarkach, które przemienią sposób, w jaki patrzysz na i rozwijasz projekty. Jego możliwości dają designerskim ideom nowe życie. W tym artykule skupimy się na wprowadzeniu do WebGL oraz na tym, jak praktycznie wykorzystać to narzędzie w twoich projektach.
Tomasz Kozon
11 mar 2024
Support
Blender: Definicja i przyczyny popularności w świecie grafiki 3D
Blender jest jednym z czołowych narzędzi służących do tworzenia grafiki 3D, cenionym za jego uniwersalność i dostępność. Niezależnie od tego, czy jesteś artystą, czy studiem produkcyjnym, Blender ma coś dla Ciebie. W tym artykule przyjrzymy się bliżej niemu oraz powodom, dla których stał się on tak popularny w świecie grafiki 3D.
Tomasz Kozon
22 paź 2024
UX Research i badania
Animacje przewijane: definicja, mechanizm działania i jej wpływ na interakcje z użytkownikiem
Rozważmy animacje przewijane, które przemieniają statyczne tło w dramatyczną, interaktywną opowieść. Są to złożone techniki webowe, zaskakujące swoim dynamizmem. Podczas przewijania strony, animacje ożywają, wpływając na sposób, w jaki odbieramy treść. W tym artykule przyjrzymy się, jak działają i jak wpływają na interakcję z użytkownikiem.
Tomasz Kozon
19 lis 2024
Marketing
Core Web Vitals - klucz do optymalizacji strony
Od wielu lat szybkość ładowania strony ma decydujący wpływ na doświadczenia użytkownika, a tym samym na pozycję w wynikach wyszukiwania. Teraz Google idzie o krok dalej wprowadzając Core Web Vitals - metryki mające na celu ocenę jakości strony z perspektywy użytkownika. Czy są one sekretem do przyspieszenia i optymalizacji Twojej strony? Dowiedzmy się!
Tomasz Kozon
21 lis 2023
Marketing
Largest Contentful Paint (LCP): Kluczowy wskaźnik wydajności strony internetowej
W czasach, gdy każda milisekunda decyduje o zadowoleniu użytkownika, wskaźniki wydajności strony internetowej są kluczowe. Jednym z nich jest Largest Contentful Paint (LCP), który mierzy czas, w jakim największy element na stronie jest w pełni widoczny. Jego szybkość wpływa na doświadczenie użytkowników, SEO oraz ogólną efektywność strony.
Tomasz Kozon
28 gru 2023
business intelligence
INP (Interaction to Next Paint): Co to jest i dlaczego jest istotne dla wydajności stron internetowych?
Interakcja do Następnego Malowania (INP) to metryka, która może znacznie przyczynić się do optymalizacji wydajności stron internetowych. Mierzona w milisekundach, podkreśla, jak szybko użytkownik może zauważyć odpowiedź na swoją interakcję. Czy rozumiesz, jak kluczowa jest to metryka? Zapraszam do przeczytania więcej.
Tomasz Kozon
14 kwi 2024