3D-завод в браузере
Интерактивная индустриальная 3D-презентация: окружение завода, детали оборудования, пролёт внутри трубы и схема связей. WebGL, материалы, свет и анимация.
Игры и 3D
Интерактивный подводный мир в браузере
3D-сайт с непрерывным путешествием через три сцены: медузы, подводный сад и дерево. Геометрия, движение и свет рассчитываются в браузере, а прокрутка управляет маршрутом камеры.
Задача
Показать возможности интерактивной 3D-графики в браузере через цельный визуальный опыт. Посетитель должен перемещаться между сценами, чувствовать глубину пространства и управлять просмотром, а не наблюдать заранее записанный фон.
Решение
На Three.js создан единый маршрут через медуз, подводный сад и дерево. Процедурная геометрия, частицы и шейдерная анимация формируют живое окружение. Положение камеры связано с прокруткой; для прямого перехода между сценами предусмотрена навигация. Текст и интерфейс остаются отдельным HTML-слоем поверх WebGL.
Результат
Создан интерактивный сайт с тремя связанными сценами и управляемым маршрутом камеры. Процедурная геометрия и шейдеры оживляют подводное окружение. В кейсе — кадры проекта и полный видеопролёт с интерфейсом.
Как устроен проект
Three.js отвечает за сцену, камеру и материалы. GLSL-шейдеры управляют видом и движением частиц; постобработка добавляет свечение. Для мобильного режима предусмотрены отдельные настройки плотности частиц и разрешения отрисовки.
Что показывает видеозапись
Видео собрано покадрово из самого проекта вместе с HTML-интерфейсом. В исходном сайте это живая WebGL-сцена, не видеоподложка. Частота кадров готового ролика не является замером производительности сайта на устройстве посетителя.
Оставить заявку
Обсудим проект?
Расскажите о задаче — мы предложим лучшее решение.