Как создать 3D-сайт, не пожертвовав скоростью: опыт GRAVIT

Современный веб борется сам с собой. Хочешь красивый сайт с 3D, анимациями и тёмной темой — получишь долгую загрузку и разочарованных пользователей. Хочешь мгновенный отклик — сиди на статичных страницах в стиле «просто и без изысков».

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

1. Отказ от тяжёлых фреймворков в пользу «голой» скорости

Соблазн взять самый навороченный фреймворк с кучей модулей — велик. Команда сделала наоборот: полный контроль над размером бандла.

В основе — React 19 и сборщик Vite. Быстрая замена модулей позволяла итерировать по сложным анимациям без задержек, а оптимизированный процесс сборки на Rollup ужимал итоговый набор файлов до минимума.

Вместо библиотек компонентов — Tailwind CSS. Утилитарные классы генерируют только тот CSS, который реально используется в продакшене, а не тянут всё подряд.

2. 3D-графика на React Three Fiber

Писать 3D на чистом WebGL — занятие для терпеливых: много кода, много сложностей. Поэтому использовали связку Three.js и @react-three/fiber. R3F позволяет строить 3D-сцену как обычные React-компоненты, а значит, единое состояние между 3D-миром и DOM.

Три секрета производительности

• Полигональные модели выжаты до необходимого минимума — лишние грани просто режутся.
• Оборачиваем 3D в Suspense, чтобы модели грузились только тогда, когда они реально понадобятся, и не блокировали основной текст.
• Когда пользователь уводит кадр за пределы экрана, цикл рендеринга WebGL динамически ставится на паузу. Экономия CPU и GPU — колоссальная.

3. Шёлковые анимации: Framer Motion и GSAP

Чтобы добиться ощущения премиальности, одной 3D-графики мало. Нужны микровзаимодействия, плавные появления блоков. За это отвечают Framer Motion (декларативные анимации интерфейса) и GSAP вместе с Lenis (плавный скролл).

Ключевой трюк — анимировать только CSS-трансформации: translate3d и scale. Если анимировать margin или top, браузеру приходится пересчитывать layout, а это верный путь к «тормозам». Трансформации же уходят на GPU, и даже на мобильных устройствах держится стабильные 60 fps.

Что в итоге

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

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

Ключевые решения

Частые ошибки при создании 3D-сайтов

• Оставить цикл рендеринга работать постоянно — даже когда сцена не видна. Это, пожалуй, самая распространённая ошибка.
• Анимировать layout-свойства вместо трансформаций.
• Тащить целые библиотеки компонентов ради пары кнопок.
• Загружать все 3D-модели сразу, не используя Suspense.
• Не оптимизировать полигональную сетку: каждая лишняя вершина — это время обработки на слабых девайсах.

Эти решения подходят, если проект рассчитан на долгую жизнь и важен не только внешний вид, но и скорость. Если же сайт — простая визитка без интерактива, такие ухищрения избыточны.

Главный вывод: красивый и быстрый сайт — это не волшебство, а набор осознанных инженерных решений. Выбирайте инструменты под задачу, следите за размером бандла и не давайте браузеру делать лишнюю работу.