Перейти к содержимому
6 мин чтения—просмотров—реакций
Раздел дизайна

Spline V2: AI-агент собирает интерактивные 3D-сцены, а интерфейс можно написать поверх них

Spline V2 получила AI-агента, WebGPU и HTML/JS-слой. Как собрать интерактивный 3D-промоблок, подключить внешний AI и учесть ограничения экспорта.

В этой статье
Spline V2: AI-агент собирает интерактивные 3D-сцены, а интерфейс можно написать поверх них - обложка

Spline 20 августа 2026 года выпустила V2 — обновлённый 3D-редактор с AI-агентом, рендерингом на WebGPU и HTML/JS-слоем поверх сцены. Для дизайнера это возможность собрать в одном файле объёмный объект, его поведение и управляющий интерфейс: например, промоблок с выбором цвета или небольшую игру.

Разбираем августовский релиз по официальному анонсу и документации, проверенной 8 сентября. Главный интерес здесь — переход от красивого 3D-объекта к сцене, с которой посетитель может взаимодействовать.

Что делает агент

Встроенный AI Agent работает через команды редактора: создаёт объекты, настраивает материалы и свет, добавляет анимацию и связывает интерактивность. Его изменения попадают в историю отмены и синхронизируются с участниками файла. Результат можно продолжить редактировать вручную.

Панель Agent находится в левой части редактора. Перед запросом можно выделить объект: тогда правка «сделай это матовым» получает конкретную цель. В документации Spline рекомендует последовательные уточнения вместо одного огромного задания.

У агента есть и ограничения: он работает с одним файлом и одной правкой за раз, а точные координаты иногда быстрее выставить самостоятельно. Сложное задание может выполниться частично. Поэтому после изменения поведения важно посмотреть, что действительно получилось, а не ограничиваться ответом в чате.

Источник: документация AI Agent.

Зачем нужен HTML/JS поверх 3D

В V2 есть три режима: Edit, Code и Preview. В Code хранится HTML-документ с CSS и JavaScript, а Preview показывает его вместе со сценой. Через встроенный API код может обращаться к объектам и переменным Spline.

Так можно сделать панель выбора материала, счётчик очков или кнопки управления анимацией. Интерфейс и объёмная часть остаются связаны внутри одного файла.

Есть важный нюанс экспорта: HTML-слой переносится в Public URL, встраивание через spline-viewer и экспорт с движком Spline, но не в экспорт three.js/react-three-fiber. Кроме того, изменения объектов из исполняемого кода — временное состояние: они сбрасываются при перезагрузке и не превращаются в сохранённые правки исходной сцены.

Это влияет на выбор способа встраивания. Если прототип опирается на Code, формат экспорта нужно проверить до того, как вокруг него будет построен весь сайт.

Источник: Code Tab и ограничения экспорта.

Что изменилось в графике

Spline перевела рендерер на WebGPU, сохранив WebGL как запасной вариант. Обновление также включает PBR-материалы, HDR-освещение, отражения и новые инструменты моделирования.

Компания сообщает об ускорении работы со сложными сценами и уменьшении размера экспорта. Эти заявления описывают улучшения движка, но не дают готового прогноза для каждого лендинга: скорость конкретного промоблока всё равно зависит от его содержимого и устройства посетителя.

Источник: официальный анонс Spline V2.

Можно работать через внешнего агента

Spline MCP подключает совместимые AI-инструменты к открытому редактору. Для такого подключения требуется настольное приложение Spline для Windows или macOS: браузерной вкладки недостаточно.

После установки и запуска приложения поддерживаемому AI-клиенту может потребоваться перезапуск. Подключения управляются в Settings → MCP. Внешний агент получает инструменты для чтения и изменения сцены, создания объектов и работы с кодовым слоем.

Источник: Spline MCP Server.

Пример: промоблок с выбором цвета

Предлагаем небольшой сценарий для самостоятельной проверки. Это редакционный пример задания, а не отчёт о проведённом тесте.

Сначала попросите агента собрать основу:

Создай 3D-сцену для промоблока настольной лампы. Лампа стоит на невысоком подиуме, фон светлый, освещение мягкое студийное. Корпус матовый, без логотипов. Оставь слева свободное место под заголовок. Объекты назови так, чтобы корпус, подиум и источник света было легко найти.

После визуальной проверки добавьте поведение:

Сделай HTML-панель с тремя кнопками: «Графит», «Коралл» и «Песочный». По нажатию меняй только цвет корпуса лампы. Выбранная кнопка должна быть заметна. Добавь переключатель вращения и кнопку сброса. Подиум, камера и освещение должны сохраняться.

И отдельно задайте условия для мобильного экрана:

Проверь композицию на узком экране. Панель не должна перекрывать лампу или блокировать взаимодействие со всей сценой. Кнопки должны работать с клавиатуры. При включённом предпочтении уменьшенного движения автоматическое вращение должно быть выключено.

При проверке пройдите сценарий целиком: несколько раз смените цвет, остановите вращение, сбросьте состояние и перезагрузите превью. Затем проверьте тот же сценарий в выбранном формате экспорта. Рабочий результат — это не только удачный ракурс, но и предсказуемые реакции на действия посетителя.

Для каких задач стоит попробовать

Наиболее понятные применения — интерактивные демонстрации товара, объясняющие сцены и небольшие игровые элементы в промопроектах. В них можно ограничить число объектов и действий, быстро проверить идею и решить, оправдывает ли 3D сложность страницы.

Встроенный агент расходует AI-кредиты рабочего пространства; условия тарифа следует проверить перед длинной серией генераций. Для первого знакомства достаточно одной сцены с двумя-тремя действиями: такой объём позволяет оценить и визуальный результат, и управляемость последующих правок.

Реакции

—реакций