Spline для початківців: 3D для вебу без коду

Крок 1

Зареєструйтеся й подивіться, як зроблено інші сцени

Spline працює в браузері, файли зберігаються в хмарі; для macOS і Windows є також застосунок. Безкоштовний тариф станом на листопад 2026 року — $0: обмежена кількість особистих файлів, доступ до бібліотеки Spline, без AI-кредитів, а експорт для вебу — з водяним знаком. Платні тарифи прибирають водяний знак і додають AI-кредити. Перш ніж створювати свою сцену, відкрийте Library і Community: там є готові сцени, які можна зреміксувати й розібрати, щоб зрозуміти, як вони влаштовані.

• •відкрийте 2–3 сцени з Community й подивіться, з яких об'єктів, матеріалів і джерел світла вони складаються;
• •оберіть навчальну задачу: 3D-іконка для лендингу, обертовий логотип або кнопка, що реагує на наведення;
• •запишіть, яку роль 3D відіграє на сторінці: прикраса чи частина повідомлення.

Крок 2

Камера, об'єкти й композиція

Створіть новий файл і спершу навчіться рухати камеру. За документацією Spline: обертати камеру — Option (macOS) або Alt (Windows) + клік і перетягування, наближати — прокручуванням, зсувати — Space + клік і перетягування. Потім додайте прості об'єкти: куб, сферу, тор. У 3D діють ті самі принципи композиції, що й у 2D: головний об'єкт, баланс, вільний простір.

• •почніть з одного головного об'єкта й 1–2 допоміжних;
• •перевірте, як сцена виглядає з тієї точки, з якої її побачить відвідувач сайту;
• •назвіть об'єкти в панелі шарів: це знадобиться, коли додаватимете взаємодію.

💡 Принципи балансу й фокусу ті самі, що й у плоскому дизайні: див. гайд Композиція в дизайні.

Крок 3

Матеріали, світло й колір

Пласка 3D-сцена здебільшого має проблему зі світлом, а не з формою. Задайте об'єктам матеріали й обмежте палітру так само, як у 2D: основний колір, акцент і нейтральні тони. Додайте світло так, щоб в об'єкта була освітлена й тіньова сторона: саме контраст світла й тіні дає об'єм.

• •2–3 кольори на всю сцену, не більше;
• •одне основне джерело світла задає напрямок, інші — лише м'яко підсвічують тіні;
• •фон сцени узгодьте з фоном сторінки, на яку її вставлятимете.

Крок 4

Інтерактивність: стани, події й дії

Інтерактивність у Spline будується без коду з трьох частин. Стан (state) — інша версія об'єкта: більший розмір, інший колір, поворот. Виділіть об'єкт, у панелі States натисніть «+» — з'являться Base State (поточний вигляд) і новий State, у якому ви змінюєте властивості. Потім додайте подію (наприклад, наведення курсора чи клік) і дію, яка перемикає стан. Перевіряйте результат у режимі Play.

• •почніть з однієї взаємодії: об'єкт трохи збільшується при наведенні;
• •рух має бути коротким і м'яким: різкі довгі анімації відволікають від змісту сторінки;
• •подумайте про телефон: на сенсорному екрані наведення курсора немає.

💡 У Spline є AI-агент і генерація 3D-моделей за промптом, але вони використовують AI-кредити, яких у безкоштовному тарифі немає. Для навчання це навіть добре: перші сцени варто зібрати руками, щоб розуміти, з чого вони складаються.

Крок 5

Оптимізуйте сцену й вставте її на сайт

Натисніть Export на панелі інструментів і оберіть Public URL: Spline згенерує посилання на сцену й код для вставки, який працює в Webflow, Framer, WordPress, Notion та інших інструментах. У Play Settings можна налаштувати камеру, обертання, зум і поведінку під час прокручування сторінки. Після змін у сцені натисніть «Update Public URL». Перед вставкою відкрийте панель Performance: вона показує оцінку розміру експорту, часу завантаження й кількості полігонів.

• •зменшуйте кількість полігонів: для параметричних об'єктів зменште кількість сторін, а згладжування рідко потребує більше 1–2 рівнів;
• •увімкніть стиснення геометрії й зображень у налаштуваннях експорту;
• •видаліть невикористані об'єкти й матеріали;
• •перевірте сторінку зі сценою на телефоні: 3D не має затримувати появу основного тексту й кнопки.

💡 Покажіть сцену в спільноті з контекстом: на якій сторінці вона житиме і що має передати. Так фідбек буде про задачу, а не лише про «гарно чи ні».