Glass Spiral — интерактивная сцена со стеклом и физикой в браузере (Three.js, React Three Fiber)

Используемые навыки 3D-визуализация JavaScript React.js Three.js

Описание

Авторский проект, не заказ. Задача — показать стекло, которое хочется потрогать: реалистичное преломление, цвет и вес объектов в реальном времени на обычной веб-странице, в том числе на телефоне. Тот же подход годится для промо-страниц и презентаций продукта, где нужен живой материал вместо видео.

Решение

React Three Fiber и Three.js. В сцене стеклянные пузыри с пиксельной рыбкой и морскими звёздами внутри, цветные сферы, которые удерживает физика Rapier, и большая стеклянная сфера, которая преломляет всё за ней. Материалы — MeshTransmissionMaterial с оттенком для каждой сферы; постобработка — N8AO, Bloom и хроматическая аберрация. Стекло, палитра, свет и эффекты настраиваются в живой панели Leva и сохраняются между сессиями, поэтому внешний вид можно подбирать вместе с заказчиком прямо в браузере. Для телефонов отдельный профиль качества: отключён режим выборки стекла, из-за которого сферы на телефонах рендерились чёрными, и ограничено разрешение рендера. Работаю AI-first: код пишу вместе с ИИ-агентами, моя часть — визуальное направление, итерации и проверка в браузере.

Результат

Живая сцена опубликована, ссылка ниже. Кадры сняты с опубликованного сайта 05.11.2026; портретный кадр — окно 390×844 на компьютере, а не реальный телефон. Показатели FPS не заявляю: замеров не было.