Three.js (WebGL)
Сделано полностью собственными силами, включая написание контроллера для вращения с 3 степенями своды, который отсутствует в Three.js
Реализация выполнена средствами:
Технологический стек:
VITE (React-фреймворк)
React 19 — современный UI
Three.js — 3D-рендеринг через WebGL
@react-three/fiber и @react-three/drei — интеграция Three.js с React
TypeScript — типизация
Tailwind CSS — адаптивная верстка
Реализованные функции:
Интерактивный 3D-глобус в стиле дотворк:
Тысячи точек, формирующих контуры материков и океанов
Разделение точек на land/ocean с разной прозрачностью
Оптимизация рендеринга
Интерактивность:
Эффект "разлеташки" при перетаскивании мыши/тача
Плавный возврат точек в исходное положение
Настройка силы эффекта и скорости возврата
OrbitControls для ручного управления камерой
Реализованы все реальные течения и силы действующие на водные массы
Реализовано свечение городов ночью с математической точностью
Дополнительные эффекты:
Объемный 3D-текст над глобусом (настраиваемый)
Динамическая адаптация цвета точек под фон
FPS-метрики в реальном времени
Настраиваемый цвет фона (с пресетами)
Адаптивность:
Полностью адаптивный дизайн для мобильных устройств
Оптимизация камеры и управления для touch-устройств
Мобильная панель настроек (bottom sheet)
Панель настроек:
Управление автовращением и скоростью
Настройка интерактивных эффектов
Выбор цвета фона (цветовая палитра + hex-ввод)
Переключение видимости задней полусферы
Управление FPS-метриками