Ещё несколько лет назад трёхмерный логотип на первом экране сайта означал минимум неделю работы и отдельного человека в команде. Кто-то лепил модель в Blender, кто-то настраивал свет и рендер (просчёт финальной картинки), кто-то отдельно думал, как всё это оживить в браузере и не уронить скорость загрузки.
CheckroiПодборка курсов по Blender127 курсов • 32 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Spline сжимает эту цепочку до одной вкладки браузера. Вы собираете сцену мышкой, вешаете на объект реакцию на клик и наведение, жмёте «Export» и получаете код, который вставляется на сайт как обычный виджет. Ниже разберём, что редактор умеет на самом деле, где у него потолок, сколько стоит подписка в 2026 году и что принесла августовская вторая версия.
Если 3D для вас пока белое пятно, начните с базы: у нас есть отдельный материал «3D-моделирование с нуля» про полигоны, рендер и общую логику любого трёхмерного редактора.
Статья пригодится веб-дизайнерам, UI/UX-специалистам, моушн-дизайнерам и всем, кто собирает лендинги. Если вы только заходите в профессию, посмотрите разбор «Как стать веб-дизайнером с нуля».
А если хочется освоить трёхмерку системно и с обратной связью преподавателя, загляните в подборку курсов по 3D-дизайну: там программы от коротких интенсивов до годовых.
Начнём с путаницы, из-за которой половина людей ищет одно, а открывает другое.
CheckroiПодборка курсов по 3D-дизайну21 курс • 8 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что такое Spline и почему его путают со сплайном из 3ds Max
У слова «сплайн» в трёхмерке два разных значения, и они живут в разных вселенных.
Сплайн со строчной буквы — это линия, построенная через набор опорных точек. Такие кривые рисуют в 3ds Max, Blender, любом CAD-редакторе: по ним выдавливают объём, задают траекторию движения камеры, строят профили. Это математический объект. Программы с таким названием тут нет.
CheckroiПодборка курсов по 3ds Max84 курса • 24 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Spline с большой буквы — это название конкретного сервиса, который живёт по адресу spline.design. Браузерный редактор трёхмерной графики: заходите по ссылке, ничего не устанавливаете, начинаете собирать сцену. Работает так же, как Figma для интерфейсов.
Дальше речь только о втором. Если вы искали кривые в 3ds Max, вам нужен другой материал.
Короткое определение. Spline — это Figma для трёхмерки: браузер, совместное редактирование, готовый код на выходе. Всё остальное вытекает отсюда.
Что Spline умеет и чего от него ждать не стоит
Внутри редактора вы получаете набор примитивов (куб, сфера, цилиндр, тор), инструменты вытягивания и скругления, скульптинг кистью (лепка формы, как из глины), буллевы операции (вычитание одной фигуры из другой), клонеры для размножения объектов и систему частиц. Отдельно настраиваются материалы: цвет, металличность, шероховатость, прозрачность, преломление.
Сцену освещают источниками света и снимают виртуальной камерой. Всё это считается прямо в браузере в реальном времени, без очереди на рендер и без ожидания в полчаса ради одного кадра.
Экспорт бывает четырёх видов:
- Код для сайта — публичная ссылка на сцену плюс сниппет Spline Viewer или готовый React-компонент;
- Картинка — PNG или JPG, на бесплатном тарифе в невысоком разрешении;
- Видео — WebM, MP4 или секвенция кадров;
- 3D-файл — glTF и GLB для веба и движков, STL для печати, USDZ для дополненной реальности на iPhone.
Теперь про потолок. Spline не тянет фотореалистичную визуализацию интерьера, скелетную анимацию персонажа, симуляцию ткани и жидкости, тяжёлые сцены на десятки миллионов полигонов (треугольников, из которых собрана поверхность модели). У него нет полноценного нодового редактора материалов и процедурной геометрии.
Задачи у сервиса другие: лёгкая стилизованная графика для веба и интерфейсов. Один-два объекта, чистая форма, аккуратный свет, реакция на действие пользователя. На таких задачах Spline быстрее всех.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяSpline против Blender, Cinema 4D и Figma
Сравнивать Spline с Blender примерно так же честно, как сравнивать самокат с грузовиком: обе штуки едут, но задачи у них разные. Всё же таблица помогает понять, куда вы попадаете.
| Параметр | Spline | Blender | Cinema 4D | Figma |
|---|---|---|---|---|
| Где работает | Браузер и десктоп-приложение | Программа на компьютере | Программа на компьютере | Браузер и приложение |
| Порог входа | Вечер | 2–3 месяца | 1–2 месяца | Вечер |
| Цена | Бесплатно или от $12/мес | Бесплатно | От $60/мес | Бесплатно или от $12/мес |
| Работа вдвоём над файлом | Да, в реальном времени | Нет | Нет | Да, в реальном времени |
| Интерактив на сайт | Готовый код из коробки | Через сторонние библиотеки | Через сторонние библиотеки | Только прототип |
| Фотореализм | Ограниченный | Полный | Полный | Нет 3D |
| Персонажная анимация | Нет | Да | Да | Нет |
| Тяжёлые сцены | Плохо | Хорошо | Хорошо | Не тот случай |
Практический вывод простой. Если нужен интерьер под печать в каталоге или анимация персонажа для мультфильма, идите в Blender или Cinema 4D. Если нужен объект, который крутится на лендинге и реагирует на курсор, Spline соберёт его за вечер и сразу отдаст код.
CheckroiПодборка курсов по Cinema 4D62 курса • 21 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
С Figma сравнение уместнее всего по ощущениям от интерфейса: слои слева, свойства справа, совместное редактирование, ссылка на файл вместо пересылки архивов. Дизайнер, который жил в Figma, садится за Spline без переучивания. Про сам Figma у нас есть подробная инструкция.
Первая сцена за двадцать минут
Разберём на живом примере, как пользоваться Spline: делаем крутящийся объёмный логотип для первого экрана лендинга. Уметь программировать для этого не нужно, всё собирается мышкой.
Шаг 1: создаём файл
Заходите на spline.design, жмёте Get Started, входите через почту или Google. Регистрация бесплатная, карту на входе не просят. Открывается пустая сцена с сеткой пола, источником света и камерой.
Шаг 2: ставим форму
На верхней панели выбираете примитив. Для логотипа удобнее всего начать с плоской фигуры и вытянуть её в объём инструментом Extrude, а углы скруглить через Bevel. Если у вас есть логотип в векторе, его можно нарисовать пером прямо в сцене и вытянуть тем же способом.
Шаг 3: настраиваем материал
Материал в Spline собирается слоями, как эффекты в Photoshop. Базовый слой Color задаёт цвет, поверх него добавляются Depth, Fresnel, Gradient, Noise. Самый быстрый способ получить приятную картинку новичку: цвет плюс лёгкий Fresnel для подсветки по краям. Три клика, а объект уже выглядит дорого.
Шаг 4: ставим свет и камеру
По умолчанию в сцене один направленный источник. Добавьте второй с противоположной стороны и убавьте его яркость вдвое: так объект перестанет выглядеть плоским. Камеру разверните под небольшим углом сверху, лобовой ракурс почти всегда скучный.
Шаг 5: включаем вращение
Самый простой вариант анимации живёт в панели справа: свойство Orbit Controls разрешает крутить объект мышкой, а Follow Camera заставляет его поворачиваться вслед за курсором. Для автоматического вращения понадобятся States, о них следующий раздел.
Шаг 6: забираем результат
Кнопка Export, вкладка Code, тип Spline Viewer. Сервис выдаёт две строки: подключение скрипта и сам тег со ссылкой на сцену. Копируете их в шаблон сайта, обновляете страницу, логотип крутится.
States и события: как собрать анимацию мышкой
Анимация в Spline построена на состояниях. Вы фиксируете, как объект выглядит сейчас (Base State), создаёте второе состояние и меняете в нём параметры: положение, поворот, размер, цвет, прозрачность. Редактор сам просчитывает переход между двумя точками.
Дальше состояние привязывается к событию. Список стандартный: клик мышкой, наведение, скролл страницы, нажатие клавиши, перетаскивание, старт сцены. Можно навесить несколько событий на один объект и выстроить их в цепочку.
Вот что собирается на этой механике за один вечер:
- иконка, которая разворачивается на 15° при наведении;
- карточка товара, вращающаяся, пока пользователь тянет мышкой;
- объект, который меняет цвет и подпрыгивает по клику;
- герой-объект, разбирающийся на части по мере скролла;
- кнопка, у которой при наведении появляется объёмная тень.
Ограничения тоже честные. Тонкие кривые ускорения настраиваются грубее, чем в After Effects, длинные ролики с десятками ключей собирать неудобно, а сложная логика вида «если пользователь уже кликал, поведение меняется» упирается в потолок визуального редактора. Во второй версии для таких случаев появился режим кода, но об этом чуть ниже.
Как поставить сцену на сайт
Тут три дороги, и выбор зависит от того, на чём собран ваш сайт.
Обычный сайт: Spline Viewer
Самый простой путь. В экспорте выбираете Code → Spline Viewer, получаете подключение скрипта и один тег с адресом сцены — это и есть код для встраивания, embed. Работает на любом HTML-сайте, в Webflow, Framer, Tilda и даже в Notion. У Webflow при этом есть встроенная поддержка Spline, туда сцена вставляется отдельным блоком.
Проекты на React: отдельный компонент
Для проектов на React есть официальный пакет. Ставится вместе с движком:
npm install @splinetool/react-spline @splinetool/runtimeДальше компонент подключается как обычный элемент, а ссылку на сцену вы берёте из того же экспорта. Для Next.js есть отдельная точка входа @splinetool/react-spline/next: она рисует размытую заглушку на сервере, пока сцена грузится.
Своя сборка: glTF
Если у вас уже есть трёхмерный движок на сайте (обычно Three.js), сцену выгружают файлом GLB и подключают как модель. Экспорт с текстурами доступен на платных тарифах, геометрия без материалов выгружается и на бесплатном.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКак не убить скорость сайта красивым 3D
Трёхмерная сцена весит в разы больше картинки, и её вес целиком ложится на первый экран.
Что происходит без подготовки: браузер грузит движок и файл сцены, главный поток подвисает, LCP (время до отрисовки самого крупного элемента страницы) уезжает за три-четыре секунды, поисковик снижает оценку скорости, посетитель с мобильного видит белый экран и уходит. Причём вы этого не заметите, потому что у вас сцена лежит в кеше и открывается мгновенно.
Пять вещей, которые снимают проблему:
- Ленивая загрузка. Сцена подгружается после того, как отрисовался основной контент. В React это делается через динамический импорт и Suspense, а на обычном сайте скрипт подключают после первого экрана.
- Заглушка вместо пустоты. Пока сцена грузится, на её месте должна лежать статичная картинка того же объекта. Пользователь сразу видит логотип вместо серого прямоугольника.
- Диета по полигонам. Уберите из сцены всё, что не попадает в кадр, снизьте детализацию скруглений, откажитесь от лишних источников света.
- Отключение на мобильных. Самое честное решение для слабых телефонов: показывать там картинку вместо живой сцены. Никто не заметит, зато скорость вырастет вдвое.
- Замер после внедрения. Прогоните страницу через PageSpeed Insights до и после. Если LCP вырос больше чем на полсекунды, возвращайтесь к пунктам выше.
Правило одного объекта. На первом экране живёт одна трёхмерная сцена и ничего больше. Две сцены на странице почти гарантированно означают просадку скорости, которую потом придётся лечить месяцами.
Версия 2: AI-агент, MCP и WebGPU
21 августа 2026 года вышла вторая версия Spline, и это пересборка редактора целиком. Разберём по частям.
Три режима вместо одного
Редактор разделили на Edit (привычный холст), Code (редактор скриптов с подсветкой и подсказками по API) и Preview (полноэкранный просмотр готовой сцены). Режим кода закрывает ровно ту дыру, о которой писали выше: сложную логику интерактива теперь пишут скриптом вместо десятка состояний.
Spline AI: агент внутри редактора
Агент видит сцену целиком: объекты, материалы, свет, камеры, буллевы операции, частицы, клонеры, траектории, небо, переменные, события и переходы. Он умеет писать HTML и JavaScript для интерактива и раскладывает элементы через решатель ограничений, вместо того чтобы двигать их по координатам вслепую.
Сгенерированные сцены остаются полностью редактируемыми: агент строит болванку, вы доводите её руками. Этим он отличается от генераторов трёхмерных моделей: те отдают готовый файл, разобрать который уже нельзя.
MCP-сервер: сценой рулит ваш кодовый ассистент
Spline открыл редактор наружу через MCP (Model Context Protocol — открытый стандарт, по которому нейросети подключаются к внешним программам и данным). Внешние агенты получили те же инструменты, что и встроенный.
Работает с Claude Code, Cursor, ChatGPT, Codex, Google Antigravity и VS Code. Десктоп-приложение подхватывает подключение само, без ручной настройки. На практике это значит, что вы описываете сцену в чате своего кодового ассистента, а она собирается в открытом рядом редакторе. Про нейросети и то, как они меняют рабочие процессы дизайнера, у нас есть отдельная обзорная статья по направлениям в дизайне.
Новый движок и картинка
Рендер переписали на WebGPU (свежий стандарт доступа браузера к видеокарте, наследник WebGL). WebGL остался запасным вариантом для старых браузеров. Что это дало:
- PBR-материалы (физически корректные, как в больших редакторах) и подсветка сцены картинкой окружения;
- отражения в экранном пространстве и зеркальные плоскости;
- два типа неба: физическое и на основе HDRI-карты (панорамного снимка реального окружения);
- слой пыли, оседающей на верхних гранях, поддержка цвета вершин и высотный туман;
- система волос с ветром и слипанием прядей;
- фаска и скругление как отдельный инструмент, симметрия кисти при скульптинге;
- буллевы операции примерно вчетверо быстрее, клонеры экономнее, экспорт легче.
Что нужно железу и браузеру
Отдельных системных требований у Spline нет, но правило простое: чем свежее браузер, тем лучше. WebGPU поддерживают актуальные версии Chrome, Edge, Safari и Firefox; на старых сборках сцена откроется через WebGL и будет считаться заметно медленнее.
По железу хватает любого ноутбука последних лет с дискретной или приличной встроенной графикой. Восьми гигабайт оперативной памяти достаточно для учебных сцен, шестнадцати — для рабочих. Тормозит обычно из-за количества открытых вкладок: браузер делит видеопамять между всеми ними сразу, и тяжёлая сцена начинает подтормаживать рядом с десятком открытых страниц.
С телефона и планшета сцену можно посмотреть, но редактировать неудобно: интерфейс рассчитан на мышь и клавиатуру.
Десктоп-приложение
Приложение для macOS и Windows можно скачать с сайта, и его тоже переписали: сцены открываются в изолированных вкладках, фоновый рендер продолжается, пока вы работаете в другом месте, подключения к нейросетям определяются автоматически. Для тяжёлых проектов приложение стабильнее браузера.
Сколько стоит Spline в 2026 году
Тарифов пять, и разница между ними понятная.
| Тариф | Цена при годовой оплате | Цена помесячно | Что даёт |
|---|---|---|---|
| Free | $0 | $0 | Ограниченное число личных файлов, водяной знак на веб-экспорте, библиотека Spline, 2000 AI-кредитов в месяц |
| Hobby | $12/мес | $15/мес | Неограниченные файлы, экспорт без водяного знака, картинки в высоком разрешении, библиотека материалов и звуков, 3000 AI-кредитов |
| Pro | $25/мес | $30/мес | Всё из Hobby плюс папки и проекты без лимита, экспорт видео, сборки под iOS и Android, переменные, API и вебхуки, 10 000 AI-кредитов |
| Max | $60/мес | $70/мес | Всё из Pro плюс 10 000 AI-кредитов сверху, видео до 100 МБ, расширенные лимиты на вызовы MCP |
| Enterprise | По запросу | — | Кастомные AI-кредиты, единый вход по SAML, управление командой, приоритетная поддержка |
Что брать, если непонятно. Учитесь и пробуете: оставайтесь на Free, водяной знак на учебных работах никому не мешает. Делаете сайты клиентам: берите Hobby за $12, он снимает единственное болезненное ограничение. Pro нужен, когда появляется экспорт видео и работа с командой. Max имеет смысл только при плотной работе с нейросетями внутри редактора.
Про AI-кредиты. Они тратятся на генерацию объектов, текстур и переносов стиля. Две тысячи кредитов на бесплатном тарифе хватает, чтобы понять, нужна ли вам эта часть вообще, и не спешить с платным тарифом.
Доступ и оплата из России
Тут важно разделить два вопроса, которые обычно валят в один.
Сайт открывается. Мы проверили доступность spline.design и редактора с российского сервера: оба адреса отвечают нормально, без блокировок и заглушек. Зарегистрироваться, собрать сцену на бесплатном тарифе и выгрузить код можно без каких-либо ухищрений.
Карта российского банка не пройдёт. Платёжная система сервиса отклоняет платежи из России, как и у большинства зарубежных подписок. Оплатить подписку получается тремя способами: зарубежной картой, если она есть; через посреднические сервисы оплаты подписок; корпоративным платежом с юрлица за рубежом.
Мы не рекомендуем конкретных посредников: рынок нестабильный, и то, что работает сегодня, завтра может пропасть вместе с деньгами. Если подписка нужна для работы, спокойнее договориться об оплате через работодателя.
Отдельный вопрос: что делать с уже оплаченной подпиской, если способ оплаты отвалится. Файлы никуда не денутся: аккаунт просто вернётся на бесплатный тариф, сцены останутся доступными, а на новых веб-экспортах снова появится водяной знак. Готовые экспорты, которые вы уже поставили на сайты клиентов, продолжат работать.
Рабочая тактика для тех, кто пробует: соберите первые проекты на бесплатном тарифе, доведите их до состояния, когда за подписку жалко не заплатить, и только тогда решайте вопрос с оплатой. Ограничение бесплатного тарифа одно и оно косметическое, а на учёбу и портфолио водяного знака хватит с запасом.
Русского интерфейса у Spline нет, меню только английское. Слов там немного и они повторяются от сцены к сцене, так что школьного уровня хватает.
Чем заменить Spline
Если конкретно этот сервис не подошёл, у него есть соседи по нише:
- Vectary — ближайший аналог, тоже браузерный, сильнее в предметной визуализации и дополненной реальности, слабее в анимации;
- Womp — самый простой из всех, лепка объёма похожа на работу с пластилином, отлично заходит для иконок и мелких объектов;
- Rive — векторная анимация вместо трёхмерной, задача соседняя: интерактив для сайтов и приложений с сильной системой состояний;
- Blender — бесплатный и умеет почти всё, ценой месяцев обучения; выгружает GLB для веба, но интерактив придётся писать руками;
- Three.js — библиотека для программистов, полный контроль и никакого визуального редактора.
Для дизайнера, который хочет объём на сайте и не хочет становиться трёхмерщиком, выбор обычно сводится к паре Spline и Vectary.
Кому Spline подходит, а кому нет
Короткий чек-лист. Считайте плюсы и минусы.
Spline вам подойдёт, если:
- вы дизайнер интерфейсов или веб-дизайнер и хотите добавить объём в макеты;
- ваша задача укладывается в короткую интерактивную сцену на лендинге;
- вы работаете в команде и хотите показывать сцену по ссылке;
- у вас нет времени на несколько месяцев обучения тяжёлому редактору;
- ваши объекты стилизованные и лёгкие: иконки, логотипы, абстрактные формы.
Ищите другой инструмент, если:
- нужна фотореалистичная визуализация интерьера или товара для каталога;
- в проекте есть персонаж со скелетом и мимикой;
- требуется симуляция ткани, жидкости или разрушений;
- сцена тяжёлая и в ней десятки миллионов полигонов;
- вы делаете графику для игрового движка с жёсткими требованиями к оптимизации.
Как освоить Spline за две недели
План рассчитан на час в день. Ускоряться можно, но потерянные шаги догонять придётся.
Дни 1–3: интерфейс и примитивы
- пройдите вводные уроки из справки Spline и соберите три сцены из примитивов: снеговик, стопка коробок, простая иконка;
- научитесь двигать камеру и понимать, где верх у сцены;
- разберитесь с вытягиванием, скруглением и буллевыми операциями.
Дни 4–6: материалы и свет
- соберите один объект в пяти разных материалах: матовый, металл, стекло, глянец, градиент;
- поставьте свет по схеме из трёх источников и посмотрите, как меняются тени;
- найдите три референса в галерее Spline и повторите их освещение.
Дни 7–9: состояния и события
- сделайте кнопку, которая реагирует на наведение;
- сделайте объект, который разбирается на части по скроллу;
- соберите цепочку из трёх состояний, где каждое запускает следующее.
Дни 10–12: экспорт и вес
- выгрузите сцену кодом и поставьте её на тестовую страницу;
- замерьте скорость страницы до и после;
- сделайте лёгкую версию той же сцены и сравните вес файлов.
Дни 13–14: проект в портфолио
- соберите первый экран лендинга с интерактивным объектом;
- снимите короткое видео работы сцены для показа в кейсе;
- опишите, какую задачу решает объём на этой странице.
Через две недели у вас будет один рабочий кейс и понимание, стоит ли идти в трёхмерку глубже. Если стоит, дальше открывается развилка между веб-графикой и полноценным 3D-дизайном: про вторую дорогу мы писали в материале «Как стать 3D-дизайнером с нуля», а про деньги в профессии рассказали в разборе зарплат 3D-дизайнеров.
Где научиться 3D системно
Spline осваивается по роликам за пару вечеров, а вот композиция, свет и работа с формой по роликам не берутся. Именно на них видно разницу между «нарисовал шарик» и «сделал сцену, которую хочется смотреть». Если планируете зарабатывать объёмной графикой, короткий курс с проверкой работ окупается быстрее, чем полгода самостоятельных попыток.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Нейросети для изображений и видео Перейти на сайт курса |  Эдюсон | 47 504 ₽ | 3958 ₽/мес. | 2 месяца | Обзор курса |
| 3D-художник Перейти на сайт курса |  Нетология | 109 400 ₽ | 3377 ₽/мес. | 8 месяцев | Обзор курса |
| Профессия «3D-художник окружения с нуля до PRO» Перейти на сайт курса |  Skillbox | 170 233 ₽ | 4538 ₽/мес. | 10 месяцев | Обзор курса |
| 3D-графика в играх Перейти на сайт курса | Skillbox | 68 572 ₽ | 5714 ₽/мес. | 4 месяца | Обзор курса |
| ДО Профессия 3D-художник |  GeekBrains | 135 973 ₽ | 3167 ₽/мес. | 10 месяцев | Обзор курса |
| 3D-дженералист Перейти на сайт курса | | 140 500 ₽ | 4590 ₽/мес. | 14 месяцев | Обзор курса |
| Blender.Design Перейти на сайт курса | Skillbox | 53 910 ₽ | 3023 ₽/мес. | 2 месяца | Обзор курса |
| Cinema 4D с нуля Перейти на сайт курса | Skillbox | 33 228 ₽ | 2341 ₽/мес. | 4 месяца | Обзор курса |
| 3Ds Max | Эдюсон | 34 640 ₽ | 2886 ₽/мес. | 2 месяца | Обзор курса |
| 3D-дизайнер Перейти на сайт курса |  BBE | 131 750 ₽ | 6200 ₽/мес. | 10 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по 3D-дизайну
Смежные направления тоже стоит посмотреть: курсы веб-дизайна закрывают всё, что вокруг трёхмерного объекта на странице, а курсы 3D-моделирования дают базу для тяжёлых редакторов.
