Secium — интерактивный 3D-глобус в браузере
Собрали для Secium рабочую демо-версию интерактивного 3D-глобуса в браузере: рельеф всей планеты, объёмные здания городов, поиск мест и переключатель слоёв карты. Сцена держит 60 FPS от орбиты до кварталов Ташкента и Нью-Йорка.
Задача
Secium — продукт для пространственной визуализации данных на интерактивном глобусе. Кейс посвящён его технической демо-версии: она запускается по ссылке и без установки программ показывает рельеф, городскую застройку и картографические слои. Это демонстрация технологии, у которой пока нет клиентов и бизнес-показателей.
Данные на карте мира убедительнее всего выглядят в настоящем объёме — с рельефом, высотой зданий и свободной камерой. Нужно было, чтобы такой 3D-глобус в браузере открывался по обычной ссылке, без плагинов и установки программ. Сложность в том, что один только движок трёхмерной сцены весит около пяти мегабайт, и пока он грузится, человек не должен смотреть на пустой чёрный экран.
Масштаб планеты не помещается в одну загрузку. Рельеф всей Земли, спутниковые снимки и геометрию городской застройки невозможно скачать заранее: эти данные приходят по частям, ровно тем фрагментом, над которым сейчас висит камера, — будь то орбита, горный хребет или отдельный квартал.
Плавность здесь важнее эффектов. Если при вращении или приближении картинка дёргается, ощущение живой модели пропадает, и глобус превращается в медленную иллюстрацию. Сцена должна держать ровную частоту кадров, даже когда новые участки рельефа и здания догружаются в фоне.
Управление при этом должно быть понятно и тому, кто никогда не работал с геоинформационными системами. Найти нужный город, вернуться к общему виду, сменить подложку и перейти от объёма к плоской карте — всё это без инструкции и без панелей, которые закрывают саму сцену.
Решение
Мы не стали писать картографический движок с нуля и собрали демо на CesiumJS — открытой библиотеке для 3D-глобусов на WebGL. К сцене подключили два слоя данных из облака Cesium ion: рельеф планеты Cesium World Terrain и объёмные здания из OpenStreetMap. Основная работа ушла на сборку сцены, загрузку и управление.
Человек открывает ссылку и видит Землю из космоса. В строке поиска достаточно набрать, например, «Tashkent, Uzbekistan» — камера перелетит к городу, и под ней поднимутся рельеф и кварталы. Кнопка «домой» возвращает к общему виду, переключатель слоёв меняет подложку, соседняя кнопка переводит сцену в плоскую карту, а внизу идут часы сцены со шкалой времени.
Оболочка написана на React 19, собирается Vite и публикуется на Vercel. Тяжёлый компонент со сценой подгружается лениво, через React.lazy и Suspense: пока инициализируется CesiumJS 1.127, на экране крутится индикатор «Loading Maps». Рельеф и здания затем подтягиваются из Cesium ion по мере движения камеры.
Объёмный глобус по обычной ссылке
Демо открывается в любом современном браузере без плагинов и установки: сцену рисует WebGL прямо на видеокарте устройства. Земля видна целиком из космоса, а колесо мыши или жест на тачпаде приближают камеру до уровня отдельных зданий.
Рельеф планеты и 3D-здания
Рельеф Cesium World Terrain поднимает горы и речные долины, а слой OpenStreetMap Buildings выдавливает кварталы в объём по контурам и высотам зданий. В Нью-Йорке видны небоскрёбы Манхэттена вокруг Центрального парка, в Ташкенте — телебашня и жилые массивы вокруг неё.
Поиск мест и перелёт камеры
Строка поиска в панели принимает название города или адрес и плавно переносит камеру к найденному месту. Кнопка «домой» за один клик возвращает вид на всю планету, поэтому потерять ориентацию на любом масштабе сложно.
Переключатель подложки и рельефа
Стандартный переключатель слоёв CesiumJS предлагает 15 вариантов подложки — спутниковые снимки Bing и ArcGIS, схему дорог, OpenStreetMap, снимки Sentinel-2, ночную Землю — и два варианта рельефа. Одна и та же местность выглядит по-разному в зависимости от задачи.
Три режима и шкала времени
Кнопка режима переводит сцену из объёмного глобуса в плоскую карту или промежуточный вид Columbus View. Внизу экрана работают часы сцены с кнопками воспроизведения и паузы и шкала времени в UTC, а кнопка «?» объясняет управление мышью и касаниями.
Быстрый старт тяжёлой сцены
Сначала загружается лёгкая оболочка на React с индикатором «Loading Maps», а компонент со сценой приходит отдельным фрагментом, когда готов движок. Сборку делает Vite, демо размещено на Vercel, а рельеф и здания приходят из Cesium ion частями по мере движения камеры.
Результаты
Главные итоги проекта в цифрах.
- 60 FPSПлавность 3D-сцены
Глобус вращается и приближается без рывков — от вида из космоса до уровня городских кварталов.
- 15Вариантов подложки
Спутниковые снимки, схема дорог, OpenStreetMap, ночная Земля и другие слои собраны в одном переключателе.
- 3Режима отображения
Объёмный глобус, плоская карта и промежуточный вид Columbus View переключаются одной кнопкой.
- 12 дн.От старта до демо
Сборка сцены, подключение данных, экран загрузки и публикация демо заняли двенадцать дней.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- JavaScript
- React
- Vite
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.