Статьи Unova

Как мы используем Spline для создания 3D-сайтов

2025-10-06 11:31
Расскажу, зачем мы используем Spline, как встраиваем его в сайты, какие анимации используем и как оптимизируем сцены для стабильной работы.
Меня зовут Глеб Говядинский. Я дизайнер и основатель студии Unova. Мы делаем сайты на Тильде с интерактивными 3D анимациями.
Сплайн мы используем в собственных проектах. Также занимаемся разработкой 3D-сцен для других студий и команд. Чаще всего это коллаборации, где мы создаём интерактивные 3D-решения для сайтов.
Основная роль сплайна, как вы уже догадались — 3D анимация. Мы используем его для создания 3D-сцен, которые двигаются, откликаются на курсор и клики, реагируют на прокрутку и даже имитируют физику объектов и частиц. Такой подход делает сайт более живым и эффектным. Пользователь перестаёт быть наблюдателем и получает возможность управлять интерфейсом.

Для чего мы используем Spline на сайтах

Интерактивные 3D анимации помогают не только украсить сайт, но и решают ряд других важных задач.
  • Создают вау-эффект и формируют первое впечатление о бренде.
  • Выделяют сайт на фоне конкурентов.
  • За счет вовлеченного взаимодействия повышают лояльность к бренду, что увеличивает продажи.
  • Увеличивают время нахождения пользователя на сайте, что положительно сказывается на SEO.
  • Ну и да, это просто красиво.
Таким образом, сплайн-анимации не только добавляют красоты, но увеличивают бизнес-метрики.

Как мы встраиваем Spline в Тильду

Сначала мы создаём саму сцену в Spline, а потом добавляем её на сайт. Для размещения используем два подхода.

1. Через встроенный Spline Viewer.

Самый простой вариант — скопировать несколько строк кода и вставить их в HTML-блок Tilda. В этом случае сцена подгружается напрямую с серверов Spline.

2. Через API и хостинг на своей стороне.

Более сложный вариант — выгрузить сцену в формате .splinecode, загрузить ее в свой репозиторий и подключить через API @splinetool/runtime. Тогда сцена открывается уже с нашего хостинга, что дает больше контроля.

Какие интерактивные приемы мы чаще всего используем

Просто вставить 3D на сайт — недостаточно. Чтобы пользователь получил хороший опыт нужно настроить хороший интерактив.
В своей практике мы выделили несколько приёмов, которые особенно хорошо ощущаются пользователем внутри интерфейса.

1. Зацикленные анимации

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

2. Реакция камеры на курсор

Тоже простой прием. Небольшое изменение угла обзора при движении мыши. Создаёт естественное ощущение трёхмерности. Приём ненавязчивый, но очень выразительный.

3. Движение элемента за курсором.

Анимация, при которой элемент двигается вслед за курсором. Благодаря этому можно перемещать элемент по экрану, просто двигая мышью. Приём можно доработать — создать небольшой «паровозик»: первый элемент движется за курсором, второй — за первым, третий — за вторым. Это делает эффект заметнее и добавляет динамики сцене.
Важный момент. Чтобы 3D сцена добавленная на сайт стабильно реагировала на курсор, у всех элементов, размещённых поверх неё, нужно отключить взаимодействие с мышью (pointer-events: none). В противном случае эти элементы будут блокировать курсор, и 3D-сцена перестанет правильно отслеживать движения.

4. Движение источника света за курсором.

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

5. Слежение за курсором

Объект не двигается, а поворачивается за движением мыши — будто наблюдает за курсором. Эффект легкий, но сразу делает сцену живее.
Причём есть хитрость. Для слежения за курсором используется триггер «Look at», который можно направить либо на курсор, либо на другой объект. Если вместо курсора выбрать отдельный объект, Spline позволяет более гибко настроить поведение — задать ось вращения и плоскость, в которой будет улавливаться курсор. Поэтому, для более точного управления, мы создаём вспомогательный невидимый объект, который двигается за курсором, и указываем его как цель для «Look at». В итоге получаем то же слежение за курсором, но с более точной и гибкой настройкой.
Продвинутое слежение за курсором

6. Анимация по ховеру

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

7. Анимация по скроллу

Скролл — одно из главных действий пользователя наряду с движением курсора. Анимации, реагирующие на прокрутку, помогают сделать интерфейс более живым и выразительным. Элементы могут плавно появляться, менять положение или форму, усиливая динамику страницы.

8. Физика объектов

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

9. Анимация частиц

За счет частиц можно создавать интересные атмосферные сцены. А если привязать к курсору particle force, пользователь сможет взаимодействовать с ними — разгонять, отталкивать или притягивать.

10. Комбинация всех вышеописанных приемов

Настоящая магия начинается при комбинации всех этих приемов. Редко получается обойтись каким-то одним. Смешение всех выше описанных приемов открывает бесконечные возможности для создания интересных интерактивных 3D-сцен.
Пример нашей сцены, где всё собрано вместе: винты вращаются, корпус плавно поворачивается, глаза и панель следят за курсором, аппарат двигается за мышью, а при зажатии ЛКМ срабатывает анимация и физика. В итоге — ощущение, что управляешь настоящим живым объектом. Поиграться в реалтайме со сценой можно по ссылке

Как избежать лагов на сайте

Чтобы 3D-сцена работала плавно даже на слабых устройствах, важно следить за её оптимизацией. В Spline для этого есть встроенный инструмент — панель производительности, которая показывает, насколько сцена оптимизирована.
При работе нужно учитывать два ключевых показателя:
  1. Вес сцены — сколько данных нужно загрузить пользователю.
  2. Нагрузка на процессор — насколько сложно компьютеру просчитать анимации, тени и физику в реальном времени.

Оптимизация веса сцены

Вес напрямую влияет на скорость загрузки 3D на сайте. Чем меньше размер сцены, тем быстрее она отобразится у пользователя.
  1. Используйте форматы glb или gltf. Если вы импортируете модель, например, со Sketchfab, выбирайте именно эти форматы — они весят значительно меньше, чем fbx.
  2. Следите за количеством полигонов и объектов. Чем их меньше, тем быстрее будет работать сцена. В Spline можно увидеть статистику прямо внутри интерфейса.
  3. Минимизируйте использование текстур. Особенно больших по размеру (в форматах JPG или PNG). Лучше по возможности использовать встроенные генеративные материалы и текстуры Spline — они почти не влияют на вес сцены.

Оптимизация производительности сцены

Даже лёгкая сцена может нагружать процессор, если в ней много вычислений в реальном времени.
  1. Не перебарщивайте с количеством анимаций. Чем их меньше, тем стабильнее FPS.
  2. Не используйте много источников света — особенно динамических.
  3. Удаляйте неиспользуемые материалы и эффекты.
  4. Отключайте отбрасывание и приём теней у тех объектов, где тени не влияют на итоговую картинку.
  5. Не злоупотребляйте частицами — они сильно нагружают сцену при движении и взаимодействиях.
  6. Избегайте размещения нескольких сцен Spline на одной странице
Всё это помогает достичь баланса между визуальной выразительностью и производительностью. Даже сложная 3D-сцена будет работать плавно — если грамотно контролировать её вес и оптимизировать работу в реальном времени.
На одном из конкурсов Tilda я делал 3D-сцену с китом. Хотел усилить атмосферу и добавил эффект преломления воды. Для этого поверх текстуры освещения наложил анимированную маску noise. Визуально это выглядело интересно, но производительность сразу упала почти вдвое. В итоге пришлось отказаться от эффекта ради стабильности.

Как мы тестируем

Чтобы не сталкиваться с проблемами оптимизации на реальных проектах, мы обязательно тестируем все сцены перед публикацией. Смотрим, чтобы показатели в панели производительности не выходили за пределы нормы и были соблюдены все встроенные рекомендации Spline.
Кроме того, мы отдельно проверяем сцену на слабом ноутбуке и замеряем производительность через FPS-метр. Так можно заранее понять, не будет ли 3D-анимация тормозить у пользователей.
Это помогает избежать ситуации, когда сайт с классной сценой выглядит эффектно, но работает с лагами.

Итог

Spline — инструмент, который действительно меняет подход к no-code разработке. Он позволяет не просто добавить 3D на сайт, а создать более глубокое и вовлеченное взаимодействие между пользователем и интерфейсом. Даже простая сцена с минимальной анимацией способна заметно усилить впечатление от сайта и сделать его запоминающимся.
Мы используем Spline в своих проектах постоянно и можем уверенно рекомендовать его другим дизайнерам и студиям. Интерактивные элементы помогают не только усилить визуал, но и улучшить бизнес-показатели