Statyczny zrzut ekranu części 3D pokazuje odwiedzającym tylko jeden widok. Osadzona przeglądarka pozwala obrócić model, przybliżyć detale i obejrzeć geometrię tak, jak w narzędziu CAD — bez opuszczania strony i bez instalowania czegokolwiek. STLViewer.online zamienia każdy przesłany model STL lub 3MF w jedną linijkę HTML, którą możesz wkleić do wpisu na blogu, strony produktu, dokumentacji albo materiałów kursowych.

Ten przewodnik przeprowadzi Cię przez cały proces: uzyskanie linku do udostępniania, skopiowanie kodu osadzania, wklejenie go na stronę (także w WordPressie, Webflow i Notion), ustawienie responsywnego rozmiaru, dopasowanie wyglądu parametrami URL oraz zasady prywatności, które obowiązują przy osadzeniach. Jeśli potrzebujesz pełnej listy opcji, dokumentacja opcji osadzania opisuje każdy parametr.

Po co osadzać zamiast po prostu udostępnić link?

Link do udostępniania sprawdza się świetnie, gdy chcesz, żeby ktoś otworzył model w nowej karcie. Osadzenie jest lepsze wtedy, gdy model ma być częścią strony — interaktywnym elementem, z którym czytelnik pracuje od razu, bez przechodzenia gdzie indziej. Najczęstsze powody, dla których warto osadzać zamiast linkować:

• Strony produktowe i marketingowe — pozwól kupującym obrócić rzeczywistą część przed zakupem.
• Dokumentacja i wiki — pokaż komponent obok opisujących go instrukcji.
• Tutoriale i kursy — uczestnicy oglądają model bezpośrednio podczas czytania.
• Sprzęt open source — współtwórcy sprawdzają części prosto ze strony projektu, bez klonowania repozytorium.
• Portfolio — pokaż swoje projekty jako interaktywne obiekty, a nie płaskie rendery.

Co jest potrzebne na start

Potrzebujesz tylko pliku modelu i miejsca, w którym możesz wkleić HTML:

• Plik STL lub 3MF (binarny lub ASCII STL; zespoły 3MF też działają).
• Strona, na której możesz dodać <iframe> lub blok osadzania — własny HTML, CMS lub kreator no-code.
• Bez konta. Anonimowe przesłanie od razu tworzy działający link i kod osadzania. Konto daje tylko dłuższy czas wygaśnięcia oraz panel do zarządzania modelami.

Krok 1 — Prześlij model i skopiuj jego link do udostępniania

Otwórz stlviewer.online i przeciągnij plik STL lub 3MF na stronę. Model zostanie przetworzony lokalnie i pojawi się w interaktywnej przeglądarce. Gdy będzie gotowy do publikacji, kliknij Upload, aby zapisać model i wygenerować link do udostępniania.

Każdy udostępniony model ma kanoniczny adres URL w formie:

https://stlviewer.online/view/{shareId}

{shareId} to losowy, niemożliwy do odgadnięcia identyfikator — udostępnione modele nigdy nie trafiają na publiczne listy ani do indeksu wyszukiwarek. Podczas przesyłania wybierasz też czas wygaśnięcia (od 1 godziny do 7 dni dla anonimowych przesłań) oraz to, czy odwiedzający mogą pobrać oryginalny plik.

Krok 2 — Skopiuj kod osadzania z okna Udostępnij

Okno Udostępnij zawiera gotowy blok Kod osadzania. Znajdziesz w nim kompletny fragment <iframe>, który już wskazuje na kanoniczny adres osadzenia — nie musisz niczego składać ręcznie. Fragment wygląda tak:

<iframe src="https://stlviewer.online/view/{shareId}?embed=true"
  title="My 3D model" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Najważniejszy jest parametr ?embed=true. Przełącza on przeglądarkę w tryb osadzania bez interfejsu — nagłówek, stopka i panele boczne znikają, a na stronie zostaje samo płótno 3D. Kliknij przycisk kopiowania obok bloku, a fragment trafi do schowka.

Zawsze używaj formy https://stlviewer.online/view/{shareId}?embed=true. Nie ma osobnej ścieżki /embed/ — osadzenie to zwykła strona podglądu z parametrem embed=true.

Krok 3 — Wklej iframe na swoją stronę

Wklej fragment wszędzie tam, gdzie możesz użyć HTML. Na ręcznie pisanej stronie możesz umieścić go bezpośrednio w treści:

<h2>Wspornik — rewizja C</h2>
<p>Obróć poniższą część, aby obejrzeć otwory montażowe.</p>

<iframe src="https://stlviewer.online/view/{shareId}?embed=true"
  title="3D Benchy"
  style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Zapisz stronę, a przeglądarka pojawi się w treści. Odwiedzający mogą obracać model (przeciągnięciem), przybliżać go (rolką myszy albo gestem szczypnięcia) i przesuwać (przeciągnięciem prawym przyciskiem albo dwoma palcami) — dokładnie jak w pełnej aplikacji, tylko bez otaczającego interfejsu.

Krok 4 — Dopasuj rozmiar osadzenia i zadbaj o responsywność

Przykład używa width:100%, więc przeglądarka wypełnia kontener, oraz stałej wysokości height:600px. To działa w większości układów, ale na wąskich ekranach sztywna wysokość w pikselach może być za duża albo za mała. Dwa sprawdzone wzorce:

Stałe proporcje — ramka zachowuje proporcje, gdy strona zmienia rozmiar:

<iframe src="https://stlviewer.online/view/{shareId}?embed=true"
  title="My 3D model"
  style="width:100%;aspect-ratio:16/9;border:0;"
  loading="lazy" allowfullscreen></iframe>

Stały rozmiar w pikselach — gdy potrzebujesz dokładnych wymiarów:

<iframe src="https://stlviewer.online/view/{shareId}?embed=true"
  title="My 3D model" width="800" height="600"
  frameborder="0" loading="lazy" allowfullscreen></iframe>

Kilka atrybutów warto zostawić w każdym fragmencie: loading="lazy" opóźnia ładowanie do momentu, gdy przeglądarka znajdzie się w polu widzenia (lepiej dla szybkości strony), allowfullscreen pozwala odwiedzającym rozwinąć model na pełny ekran, a opisowy title poprawia dostępność. Przeglądarka renderuje w pełnej gęstości pikseli urządzenia, więc modele pozostają ostre na ekranach high-DPI i urządzeniach mobilnych.

Krok 5 — Dostosuj przeglądarkę parametrami URL

Wygląd i zachowanie osadzonego modelu kontrolujesz parametrami zapytania dopisanymi do adresu osadzania. Dodawaj je po ?embed=true, oddzielając kolejne opcje znakiem &. Poniższe nazwy parametrów są dokładnie tymi, które odczytuje przeglądarka — pełną tabelę z wartościami domyślnymi znajdziesz w dokumentacji opcji osadzania.

Parametry logiczne przyjmują 1, 0, true lub false. Nieznane parametry są ignorowane, a nieprawidłowe wartości wracają do rozsądnych ustawień domyślnych, więc osadzenie nie zepsuje się przez literówkę.

Kilka praktycznych kombinacji:

<!-- Auto-obracający się model ze stali, bez siatki podłogi -->
<iframe src="https://stlviewer.online/view/{shareId}?embed=true&material=metal-steel&autoRotate=1&grid=0"
  title="My 3D model" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

<!-- Model statyczny, z paskiem narzędzi, aby odwiedzający mogli sami zmieniać materiały -->
<iframe src="https://stlviewer.online/view/{shareId}?embed=true&autoRotate=0&ui=minimal"
  title="My 3D model" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Przezroczyste tło i motyw

background=auto (domyślnie) sprawia, że płótno dopasowuje się do motywu strony odwiedzającego. Jeśli chcesz wtopić model w stronę z własnym kolorem tła, użyj background=transparent, aby tło strony było widoczne za modelem:

<iframe src="https://stlviewer.online/view/{shareId}?embed=true&background=transparent&autoRotate=1"
  title="My 3D model" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Możesz też wymusić stałe tło przez background=light lub background=dark, niezależnie od motywu wybranego przez odwiedzającego.

Osadzanie w WordPressie, Webflow i Notion

Ten sam iframe działa na każdej platformie, która przyjmuje własny HTML. Oto trzy najczęstsze przypadki:

WordPress

W edytorze blokowym dodaj blok Własny kod HTML (+ → wyszukaj „Własny kod HTML”), wklej fragment iframe i opublikuj. W edytorze klasycznym przed wklejeniem przełącz się na kartę Tekst (HTML). Pamiętaj, że darmowe plany WordPress.com i niektóre zaostrzone konfiguracje bezpieczeństwa usuwają surowe znaczniki <iframe>; jeśli osadzenie znika po zapisie, wklej sam adres osadzania do bloku Osadzanie albo użyj witryny na planie, który pozwala na własny HTML.

Webflow

Przeciągnij element Embed na kanwę (panel Add → Components → Embed), wklej iframe w edytorze kodu i zapisz. Przeglądarka pojawi się w podglądzie Designera oraz na opublikowanej stronie. Ustaw szerokość elementu Embed na 100%, aby dopasowywał się do układu.

Notion

Notion nie zachowuje surowych znaczników <iframe>, więc wklej sam adres URL — nie cały fragment. Wpisz /embed, wybierz Embed i wklej https://stlviewer.online/view/{shareId}?embed=true. Notion sam utworzy ramkę, a interaktywna przeglądarka pojawi się na stronie. (Wklejenie linku bez bloku embed tworzy tylko zakładkę, więc do działającej przeglądarki użyj bloku /embed.)

To samo podejście działa w większości innych narzędzi blokowych lub opartych na HTML — Ghost, Confluence, Framer i podobne przyjmują osadzenie HTML albo blok z osadzanym adresem URL.

Osadzanie pliku, który już hostujesz (?url=)

Jeśli Twój STL lub 3MF jest już na CDN-ie, GitHubie albo własnym serwerze, możesz go wyświetlić bez wcześniejszego przesyłania do STLViewer. Użyj formy /view?url= z linkiem do pliku zakodowanym w URL i dodaj &embed=true:

<iframe src="https://stlviewer.online/view?url=https%3A%2F%2Fcdn.example.com%2Fmodel.stl&embed=true&autoRotate=0"
  title="My 3D model" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Kilka wymagań dla tego wariantu:

• Adres pliku musi używać HTTPS i kończyć się na .stl lub .3mf.
• Model jest pobierany bezpośrednio przez przeglądarkę odwiedzającego — żadne bajty nie przechodzą przez serwery STLViewer.
• Ponieważ pobieranie odbywa się między domenami, host musi wysyłać odpowiednie nagłówki CORS (np. Access-Control-Allow-Origin: *). Bez nich osadzenie pokaże komunikat „Cannot load this model” zamiast modelu.
• Zakoduj URL linku do pliku, aby jego własny ciąg zapytania (np. podpisane linki S3) pozostał nienaruszony.
• Cały plik ładuje się do pamięci przeglądarki, więc utrzymuj zewnętrznie hostowane modele poniżej około 100 MB.

Wszystkie powyższe parametry dostosowania działają również razem z ?url=.

Prywatność: co udostępniają Twoi odwiedzający

Osadzenie przeglądarki nie zamienia Twojej strony w powierzchnię śledzenia. STLViewer nie ładuje żadnych zewnętrznych skryptów analitycznych ani marketingowych i ustawia wyłącznie technicznie niezbędne pliki cookie potrzebne do działania przeglądarki. Model renderuje się w przeglądarce odwiedzającego przez WebGL. Strony udostępnionych modeli są serwowane z dyrektywami noindex i wykluczone z sitemapy, więc osadzony model nie pojawi się w wynikach wyszukiwania. Jeśli osadzasz hostowany plik przez ?url=, przeglądarka odwiedzającego pobiera go bezpośrednio z Twojego hosta — STLViewer nigdy go nie widzi.

Rozwiązywanie problemów

Obszar modelu jest pusty lub pokazuje „Cannot load this model”. Dla osadzeń ?url= niemal zawsze oznacza to brak nagłówków CORS na hoście albo to, że link nie jest HTTPS / nie kończy się na .stl lub .3mf. Dla przesłanych modeli sprawdź, czy link nie wygasł.

Osadzenie znika po zapisie w WordPressie. Platforma usunęła <iframe>. Użyj bloku Własny kod HTML na planie, który na to pozwala, albo skorzystaj z bloku osadzania URL.

Przeglądarka jest ucięta lub za wysoka na telefonie. Zamień stałą height na aspect-ratio, aby ramka skalowała się razem z szerokością strony.

Parametr nic nie robi. Sprawdź, czy nazwa zgadza się dokładnie (autoRotate, nie autorotate) i czy obecne jest ?embed=true. Nieprawidłowe wartości po cichu wracają do domyślnych.

Często zadawane pytania

Czy potrzebuję konta, aby osadzić model 3D?

Nie. Anonimowe przesłanie od razu generuje link do udostępniania i gotowy do wklejenia kod osadzania. Konto dodaje tylko dłuższy czas wygaśnięcia (ponad 7-dniowy limit anonimowy) oraz panel do zarządzania modelami.

Czy osadzona przeglądarka działa w WordPressie, Webflow i Notion?

Tak. Działa na każdej platformie przyjmującej <iframe> — w WordPressie przez blok Własny kod HTML, w Webflow przez element Embed. Notion usuwa surowe znaczniki iframe, więc tam używasz bloku /embed i wklejasz adres osadzania zamiast całego fragmentu.

Czy odwiedzający mogą pobrać mój model z osadzenia?

Domyślnie osadzenie bez interfejsu (ui=none) pokazuje tylko płótno 3D, bez przycisku pobierania. To, czy oryginalny plik można w ogóle pobrać, zależy od ustawienia „Zezwól na pobieranie”, które wybierasz podczas przesyłania modelu — tego samego ustawienia, które działa na stronie udostępniania.

Jak zrobić przezroczyste tło osadzenia lub dopasować je do motywu mojej strony?

Dodaj background=transparent, aby płótno było przezroczyste i pokazywało stronę za modelem, albo background=light / background=dark, aby wymusić stałe tło. Domyślne background=auto podąża za motywem strony odwiedzającego.

Czy osadzanie zbiera jakiekolwiek dane od moich odwiedzających?

Nie. STLViewer nie ładuje żadnych zewnętrznych skryptów śledzących ani analitycznych i ustawia tylko technicznie niezbędne pliki cookie potrzebne do działania przeglądarki. Model renderuje się w całości w przeglądarce odwiedzającego.

Zobacz także

• Dokumentacja opcji osadzania — każdy parametr, z wartościami domyślnymi i ID presetów materiałów
• Przewodnik po funkcjach STLViewer.online
• Jak wyświetlić plik STL online