Як вбудувати 3D-модель на сайт

Статичний знімок 3D-деталі показує відвідувачам лише один ракурс. Вбудований переглядач дає змогу обертати модель, наближати деталі й роздивлятися геометрію так, як у CAD-інструменті — не залишаючи сторінку й нічого не встановлюючи. STLViewer.online перетворює будь-яку завантажену модель STL або 3MF на один рядок HTML, який можна вставити в допис блогу, сторінку товару, документацію чи навчальні матеріали.

Цей посібник проведе вас через увесь процес: отримання посилання для поширення, копіювання коду вбудовування, вставлення його на сайт (зокрема у WordPress, Webflow і Notion), адаптивне налаштування розміру, зміну вигляду через параметри URL та правила приватності, які діють для таких вбудовувань. Якщо вам потрібен повний перелік опцій, довідник параметрів вбудовування описує кожен параметр.

Навіщо вбудовувати, а не просто поділитися посиланням?

Посилання для поширення чудово підходить, коли ви хочете, щоб хтось відкрив модель у новій вкладці. Вбудовування краще тоді, коли модель є частиною сторінки — інтерактивним елементом, з яким читач працює одразу, не переходячи деінде. Найпоширеніші причини вбудовувати, а не просто давати посилання:

Сторінки товарів і маркетингу — дайте покупцям покрутити реальну деталь перед покупкою.
Документація і вікі — показуйте компонент поруч з інструкціями, що його описують.
Туторіали та курси — учасники оглядають модель прямо під час читання.
Open source апаратне забезпечення — учасники перевіряють деталі просто зі сторінки проєкту, без клонування репозиторію.
Портфоліо — показуйте свої роботи як інтерактивні об'єкти, а не пласкі рендери.

Процес вбудовування: завантажте модель, отримайте посилання, скопіюйте iframe, вставте на сайт, і відвідувачі побачать робочий 3D-переглядач — Від завантаження до робочого вбудовування за п'ять кроків

Що потрібно перед початком

Вам потрібні лише файл моделі та місце, куди можна вставити HTML:

Файл STL або 3MF (бінарний чи ASCII STL; збірки 3MF теж працюють).
Сторінка, де можна додати <iframe> або блок вбудовування — власний HTML, CMS або no-code конструктор.
Без облікового запису. Анонімне завантаження одразу створює робоче посилання й код вбудовування. Обліковий запис лише додає довший термін дії та панель керування моделями.

Крок 1 — Завантажте модель і скопіюйте її посилання для поширення

Відкрийте stlviewer.online і перетягніть файл STL або 3MF на сторінку. Модель обробиться локально й з'явиться в інтерактивному переглядачі. Коли будете готові опублікувати її, натисніть Upload, щоб зберегти модель і згенерувати посилання для поширення.

Кожна поширена модель має канонічну URL-адресу у формі:

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

{shareId} — це випадковий ідентифікатор, який неможливо вгадати: поширені моделі ніколи не показуються в публічних списках і не індексуються пошуковими системами. Під час завантаження ви також обираєте термін дії (від 1 години до 7 днів для анонімних завантажень) і чи можуть відвідувачі завантажувати оригінальний файл.

Placeholder — замініть знімком екрана відкритого вікна Поділитися над переглядачем, з полем посилання та QR-кодом — Вікно Поділитися: скопіюйте посилання, отримайте QR-код або скопіюйте фрагмент вбудовування

Крок 2 — Скопіюйте код вбудовування з вікна Поділитися

Вікно Поділитися містить готовий блок Код вбудовування. У ньому є повний фрагмент <iframe>, який уже вказує на канонічну адресу вбудовування — нічого складати вручну не потрібно. Фрагмент має такий вигляд:

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

Найважливіший тут параметр ?embed=true. Він перемикає переглядач у режим вбудовування без інтерфейсу — заголовок, футер і бічні панелі зникають, а на сторінці залишається лише 3D-полотно. Натисніть кнопку копіювання біля блоку, і фрагмент потрапить у буфер обміну.

Завжди використовуйте форму https://stlviewer.online/view/{shareId}?embed=true. Окремого маршруту /embed/ немає — вбудовування — це просто звичайна сторінка перегляду з параметром embed=true.

Крок 3 — Вставте iframe на свою сторінку

Вставте фрагмент будь-де, де дозволено HTML. На сторінці, написаній вручну, можна помістити його прямо в основний вміст:

<h2>Кронштейн — ревізія C</h2>
<p>Оберніть деталь нижче, щоб оглянути монтажні отвори.</p>

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

Збережіть сторінку, і переглядач з'явиться всередині контенту. Відвідувачі зможуть обертати модель (перетягуванням), масштабувати її (прокруткою або жестом щипка) і переміщувати (перетягуванням правою кнопкою чи двома пальцями) — так само, як у повному застосунку, лише без навколишнього інтерфейсу.

Placeholder — замініть знімком екрана переглядача без інтерфейсу, вбудованого в текст допису/сторінки товару, оточеного звичайним текстом — Вбудований переглядач без інтерфейсу в тексті сторінки

Крок 4 — Налаштуйте розмір вбудовування та адаптивність

Приклад використовує width:100%, тож переглядач заповнює контейнер, а також фіксовану висоту height:600px. Це працює в більшості макетів, але на вузьких екранах жорстка висота в пікселях може бути завеликою або замалою. Два надійні підходи:

Фіксоване співвідношення сторін — рамка зберігає пропорції, коли змінюється розмір сторінки:

<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>

Фіксований розмір у пікселях — коли потрібні точні розміри:

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

Кілька атрибутів варто залишати в кожному фрагменті: loading="lazy" відкладає завантаження, доки переглядач не з'явиться в полі зору (це добре для швидкості сторінки), allowfullscreen дозволяє відвідувачам розгорнути модель на весь екран, а описовий title покращує доступність. Переглядач рендерить у повній щільності пікселів пристрою, тож моделі залишаються чіткими на high-DPI та мобільних екранах.

Крок 5 — Налаштуйте переглядач параметрами URL

Вигляд і поведінку вбудованої моделі керують параметри запиту, додані до адреси вбудовування. Додавайте їх після ?embed=true, розділяючи наступні опції символом &. Наведені нижче назви параметрів — саме ті, які читає переглядач; повну таблицю зі значеннями за замовчуванням дивіться в довіднику параметрів вбудовування.

Параметр	Значення	Що робить
`autoRotate`	`1` / `0`	Безперервне обертання моделі після завантаження.
`render`	`solid` / `wireframe` / `xray`	Режим рендерингу.
`material`	ID пресету	Застосування вибраного матеріалу, напр. `metal-steel` або `wood-walnut`.
`light`	`studio` / `neutral`	Середовище освітлення.
`background`	`auto` / `light` / `dark` / `transparent`	Тло полотна.
`grid`	`1` / `0`	Сітка підлоги під моделлю.
`axis`	`z` / `y`	Вибір осі, спрямованої вгору.
`ui`	`none` / `minimal` / `full`	Видимість інтерфейсу: лише полотно, з панеллю інструментів або повні панелі.
`attribution`	`1` / `0`	Показ або приховування маленького значка «Powered by STLViewer».

Логічні параметри приймають 1, 0, true або false. Невідомі параметри ігноруються, а недійсні значення повертаються до розумних типових налаштувань, тож вбудовування не зламається через одруківку.

Кілька практичних комбінацій:

<!-- Сталева модель з автообертанням, без сітки підлоги -->
<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>

<!-- Статична модель із панеллю інструментів, щоб відвідувачі могли самі змінювати матеріали -->
<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>

Прозоре тло та теми

background=auto (за замовчуванням) змушує полотно підлаштовуватися під тему сторінки відвідувача. Щоб вписати модель у сторінку з власним кольором тла, використайте background=transparent, аби тло сторінки було видно за моделлю:

<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>

Можна також примусово задати фіксоване тло через background=light або background=dark, незалежно від теми, яку бачить відвідувач.

Placeholder — замініть знімком екрана вбудовування з background=transparent на кольоровій сторінці, де модель «висить» на тлі сторінки — Прозоре вбудовування дозволяє сторінці просвічуватися за моделлю

Вбудовування у WordPress, Webflow та Notion

Той самий iframe працює на кожній платформі, що приймає власний HTML. Ось три найпоширеніші випадки:

WordPress

У блоковому редакторі додайте блок Custom HTML (+ → знайдіть «Custom HTML»), вставте фрагмент iframe і опублікуйте. У класичному редакторі перед вставленням перемкніться на вкладку Text (HTML). Зверніть увагу: безкоштовні плани WordPress.com і деякі посилені налаштування безпеки видаляють сирі теги <iframe>; якщо вбудовування зникає після збереження, вставте лише адресу вбудовування у блок Embed або скористайтеся сайтом на плані, що дозволяє власний HTML.

Webflow

Перетягніть елемент Embed на полотно (панель Add → Components → Embed), вставте iframe у редактор коду й збережіть. Переглядач з'явиться в попередньому перегляді Designer і на опублікованому сайті. Встановіть ширину елемента Embed на 100%, щоб він підлаштовувався під макет.

Notion

Notion не зберігає сирі теги <iframe>, тож вставляйте лише URL — не весь фрагмент. Введіть /embed, виберіть Embed і вставте https://stlviewer.online/view/{shareId}?embed=true. Notion сам створить рамку, і інтерактивний переглядач з'явиться на сторінці. (Вставлення самого посилання без блоку embed створює лише закладку, тож для живого переглядача використовуйте блок /embed.)

Той самий підхід працює в більшості інших блокових або HTML-інструментів — Ghost, Confluence, Framer і подібні приймають HTML-вбудовування або блок із вбудованою URL-адресою.

Вбудовування файлу, який ви вже хостите (?url=)

Якщо ваш STL або 3MF уже лежить на CDN, GitHub чи власному сервері, ви можете показати його без попереднього завантаження до STLViewer. Використайте форму /view?url= із URL-кодованим посиланням на файл і додайте &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>

Кілька вимог для цього варіанта:

Адреса файлу має використовувати HTTPS і закінчуватися на .stl або .3mf.
Модель завантажується безпосередньо браузером відвідувача — жодні байти не проходять через сервери STLViewer.
Оскільки завантаження відбувається між доменами, хост має надсилати відповідні заголовки CORS (напр. Access-Control-Allow-Origin: *). Без них вбудовування покаже повідомлення «Cannot load this model» замість моделі.
Закодуйте URL посилання на файл, щоб його власний рядок запиту (наприклад, підписані посилання S3) залишився недоторканим.
Увесь файл завантажується в пам'ять браузера, тож тримайте зовнішньо розміщені моделі нижче приблизно 100 МБ.

Усі наведені вище параметри налаштування також працюють разом із ?url=.

Приватність: що передають ваші відвідувачі

Вбудовування переглядача не перетворює вашу сторінку на поверхню для стеження. STLViewer не завантажує жодних сторонніх аналітичних чи маркетингових скриптів і встановлює лише технічно необхідні файли cookie, потрібні для роботи переглядача. Модель рендериться у браузері відвідувача через WebGL. Сторінки поширених моделей віддаються з директивами noindex і виключені з карти сайту, тож ваша вбудована модель не з'явиться в результатах пошуку. Якщо ви вбудовуєте розміщений файл через ?url=, браузер відвідувача завантажує його напряму з вашого хоста — STLViewer його ніколи не бачить.

Усунення несправностей

Область моделі порожня або показує «Cannot load this model». Для вбудовувань ?url= це майже завжди означає відсутність заголовків CORS на хості або те, що посилання не HTTPS / не закінчується на .stl чи .3mf. Для завантажених моделей перевірте, чи не закінчився термін дії посилання.

Вбудовування зникає після збереження у WordPress. Платформа видалила <iframe>. Скористайтеся блоком Custom HTML на плані, що це дозволяє, або використайте блок вбудовування URL.

Переглядач обрізаний або зависокий на телефоні. Замініть фіксовану height на aspect-ratio, щоб рамка масштабувалася разом із шириною сторінки.

Параметр ніби нічого не робить. Перевірте, що назва точно збігається (autoRotate, а не autorotate) і що присутній ?embed=true. Недійсні значення тихо повертаються до типових.

Placeholder — замініть знімком екрана вбудованого переглядача на телефоні, що показує адаптивне масштабування в межах сторінки — Вбудовування адаптивно масштабується на мобільних екранах

Часті запитання

Чи потрібен обліковий запис, щоб вбудувати 3D-модель?

Ні. Анонімне завантаження одразу дає посилання для поширення й готовий до вставлення код вбудовування. Обліковий запис лише додає довший термін дії (понад 7-денний анонімний ліміт) і панель для керування моделями.

Чи працює вбудований переглядач у WordPress, Webflow та Notion?

Так. Він працює на будь-якій платформі, що приймає <iframe> — у WordPress через блок Custom HTML, у Webflow через елемент Embed. Notion видаляє сирі теги iframe, тож там ви використовуєте блок /embed і вставляєте адресу вбудовування замість повного фрагмента.

Чи можуть відвідувачі завантажити мою модель із вбудовування?

За замовчуванням вбудовування без інтерфейсу (ui=none) показує лише 3D-полотно без кнопки завантаження. Чи можна взагалі завантажити оригінальний файл, визначає налаштування «Дозволити завантаження», яке ви обираєте під час завантаження моделі — те саме налаштування, що керує сторінкою поширення.

Як зробити тло вбудовування прозорим або підлаштувати його під тему мого сайту?

Додайте background=transparent, щоб полотно було прозорим і показувало сторінку за моделлю, або background=light / background=dark, щоб задати фіксоване тло. Типове background=auto підлаштовується під тему сторінки відвідувача.

Чи збирає вбудовування якісь дані від моїх відвідувачів?

Ні. STLViewer не завантажує жодних сторонніх скриптів стеження чи аналітики і встановлює лише технічно необхідні файли cookie, потрібні для роботи переглядача. Модель рендериться повністю в браузері відвідувача.

Дивіться також

Довідник параметрів вбудовування — кожен параметр, зі значеннями за замовчуванням та ID пресетів матеріалів
Посібник з функцій STLViewer.online
Як переглянути STL файл онлайн