Глобус со сменой дня и ночи: как внедрить 3D-глобус в свой проект
В современном вебе интерактивная 3D-графика становится всё более доступной. Один из самых эффектных и полезных элементов — это 3D-глобус с реалистичной сменой дня и ночи. В этой статье я поделюсь своим опытом и готовым решением, которое вы сможете легко встроить в свой проект.
Мы разберём три способа интеграции: от простого iframe до полноценной кастомизации с использованием библиотеки globe.gl. Вы узнаете, как добавить глобус на сайт, не нарушая лицензионных требований, и сделать его частью вашего уникального дизайна.
Готовое решение: интерактивный глобус с циклом дня и ночи
Ниже представлен работающий пример, встроенный через iframe. Это самый быстрый способ добавить функциональность на страницу.
Способ 1: Интеграция через iframe
Самый простой и быстрый метод — встроить готовый пример с официального сайта. Это идеально, если вам нужно быстрое решение без глубокой кастомизации.
<iframe src="https://globe.gl/example/day-night-cycle/"
width="100%" height="500"
style="border:0; border-radius:16px;"
allowfullscreen loading="lazy">
</iframe>
Минусы: Ограниченная кастомизация, зависимость от внешнего ресурса, нельзя изменить поведение или внешний вид.
Способ 2: Самостоятельная интеграция с globe.gl
Этот подход даёт полный контроль над глобусом. Вы сможете менять текстуры, скорость вращения, добавлять маркеры и многое другое. Я использую этот способ в своих проектах.
Базовый HTML-шаблон
<!DOCTYPE html>
<html>
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
</head>
<body>
<div id="globeViz" style="width:100vw;height:100vh;"></div>
<script>
// Здесь будет ваш код инициализации
</script>
</body>
</html>
Реализация цикла дня и ночи (как в примере)
Для создания эффекта смены дня и ночи используется ShaderMaterial из Three.js, который смешивает дневную и ночную текстуры в зависимости от положения солнца. Я привожу адаптированный код с комментариями:
<script type="module">
import { TextureLoader, ShaderMaterial, Vector2 } from 'https://esm.sh/three';
import * as solar from 'https://esm.sh/solar-calculator';
const VELOCITY = 1; // скорость (минут на кадр)
// --- Шейдер для смешивания текстур ---
const dayNightShader = {
// ... (полный код шейдера см. в официальном примере)
};
// --- Функция положения солнца ---
const sunPosAt = dt => {
const day = new Date(+dt).setUTCHours(0,0,0,0);
const t = solar.century(dt);
const longitude = (day - dt) / 864e5 * 360 - 180;
return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
};
// --- Инициализация глобуса ---
const world = new Globe(document.getElementById('globeViz'));
// Загрузка текстур
Promise.all([
new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-day.jpg'),
new TextureLoader().loadAsync('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
]).then(([dayTexture, nightTexture]) => {
// ... создание материала и запуск анимации
});
</script>
Полный рабочий код вы всегда можете найти в официальном репозитории globe.gl. Я рекомендую использовать его как основу и дорабатывать под свои задачи.
Легальность и ссылка на источник
Библиотека globe.gl распространяется под лицензией MIT, что позволяет свободно использовать её в коммерческих и личных проектах. Однако, согласно условиям, я обязан указать авторство.
Альтернативные подходы
- Three.js + орбитальный контроль: Создать глобус с нуля, используя Three.js. Даёт максимум гибкости, но требует больше кода.
- Библиотека Cesium: Мощный инструмент для географических визуализаций, но более тяжёлый и сложный в освоении.
- API карт (Google Maps, Mapbox): Позволяют добавить 3D-вид Земли, но часто требуют API-ключи и имеют ограничения бесплатного тарифа.