Piton Studios
Piton Studios
VELAIR
[09]

VELAIR

2026
Клиент
VELAIR
Год
2026
Объём
3D web experience, scroll animation, WebGL
Роль
Design / Development
Сайт онлайн
§ Детали проекта

VELAIRКинематографичный 3D-опыт частного джета на скролле — облака, раскрывающийся салон и пролёт.

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

В проекте на Next.js, React Three Fiber, Drei и GSAP ScrollTrigger одно значение прогресса управляет камерой, джетом и облаками, а в простое непрерывного рендера нет. Режим уменьшенного движения, статичные изображения той же модели при отсутствии WebGL и отдельная мобильная композиция сочетают производительность и доступность.

Three.jsReact Three FiberGSAPNext.js

Задача

VELAIR — концептуальная работа по собственной инициативе Piton Studios; за ней нет ни реального клиента, ни производителя самолётов. Задача была построить портфолио-проект на тему частного джета на оригинальной геометрии, сгенерированной в браузере, а не на купленных 3D-моделях или видеонарезках, — и бесшовно объединить вид сверху, пролёт сквозь облака, раскрытие салона и горизонтальный полёт в одном естественном потоке скролла. При этом требовалось, чтобы опыт оставался читаемым на устройствах без поддержки WebGL, при включённом «уменьшении движения» и на узких мобильных экранах, а производительность держалась на одном canvas и одном playhead.

Решение

Контент в Next.js App Router остаётся серверным компонентом; сцена на Three.js лениво загружается только на клиенте. Самолёт — параметрическая геометрия, которая генерируется в браузере и собирается из частей, без скачиваемого файла 3D-модели. GSAP ScrollTrigger выдаёт единственное значение прогресса от 0 до 1; чистая функция превращает его в позицию камеры, джета и облаков, а отдельный помощник подстраивает зум и мобильную композицию под высоту вьюпорта. Сцена рендерится по требованию: кадр отрисовывается только при скролле, без React state или замеров DOM на каждый кадр. При отсутствии поддержки WebGL2, потере контекста или включённом «уменьшении движения» сцена переключается на статичные постеры, сделанные из той же модели; кнопки выбора салона доступны для экранных дикторов. Границы секций, сэмплирование позы и мобильная композиция покрыты автотестами на Node test runner.

Ключевые технические решения

  • Самолёт — не импортированный GLB, а оригинальная геометрия, параметрически сгенерированная и собранная прямо в браузере.
  • Одно значение прогресса GSAP ScrollTrigger одновременно управляет камерой, джетом и шейдером облаков; React state на каждый кадр не используется.
  • Рендер по требованию: сцена перерисовывается только при скролле, в простое GPU не нагружается; плотность пикселей ограничена диапазоном 1–1.5.
  • Плавный переход на статичные постеры из той же модели при отсутствии WebGL2, потере контекста или включённом «уменьшении движения».
  • Границы секций, сэмплирование позы и мобильная композиция проверяются автотестами на Node test runner.

Технологии

Next.jsReactTypeScriptThree.jsReact Three FiberDreiGSAPVercel

Результат

В итоге получилось опубликованное вживую концептуальное демо, которое бесшовно проводит через шесть секций в одном потоке скролла. Оно остаётся читаемым без WebGL, при уменьшенном движении и на мобильных — и служит референсом наших компетенций в трёхмерном сторителлинге и motion-дизайне. Как отмечено в нашей собственной документации, лицензированная модель художника и замеры производительности по устройствам — тема следующего производственного этапа.