Globe Day Night Cycle: How to Integrate 3D Globe into Your Project
In modern web development, interactive 3D graphics are becoming increasingly accessible. One of the most impressive and useful elements is a 3D globe with a realistic day/night cycle. In this article, I'll share my experience and a ready-made solution that you can easily integrate into your project.
We'll cover three integration approaches: from a simple iframe to full customization using the globe.gl library. You'll learn how to add a globe to your website without violating licensing requirements and make it part of your unique design.
Ready-Made Solution: Interactive Globe with Day/Night Cycle
Below is a working example embedded via iframe. This is the fastest way to add the functionality to your page.
Method 1: Integration via iframe
The simplest and fastest method is to embed the ready-made example from the official website. This is ideal if you need a quick solution without deep customization.
<iframe src="https://globe.gl/example/day-night-cycle/"
width="100%" height="500"
style="border:0; border-radius:16px;"
allowfullscreen loading="lazy">
</iframe>
Cons: Limited customization, dependency on external resource, cannot change behavior or appearance.
Method 2: Standalone Integration with globe.gl
This approach gives you full control over the globe. You can change textures, rotation speed, add markers, and much more. I use this method in my own projects.
Basic HTML Template
<!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>
// Your initialization code goes here
</script>
</body>
</html>
Implementing the Day/Night Cycle (as in the example)
To create the day/night transition effect, ShaderMaterial from Three.js is used, which blends day and night textures based on the sun's position. Here's the adapted code with comments:
<script type="module">
import { TextureLoader, ShaderMaterial, Vector2 } from 'https://esm.sh/three';
import * as solar from 'https://esm.sh/solar-calculator';
const VELOCITY = 1; // speed (minutes per frame)
// --- Shader for blending textures ---
const dayNightShader = {
// ... (full shader code can be found in the official example)
};
// --- Sun position function ---
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)];
};
// --- Globe initialization ---
const world = new Globe(document.getElementById('globeViz'));
// Loading textures
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]) => {
// ... creating the material and starting the animation
});
</script>
You can always find the full working code in the official globe.gl repository. I recommend using it as a foundation and customizing it for your needs.
Legality and Source Attribution
The globe.gl library is distributed under the MIT license, which allows free use in commercial and personal projects. However, under the terms of the license, I am required to provide attribution.
Alternative Approaches
- Three.js + Orbit Controls: Build a globe from scratch using Three.js. Offers maximum flexibility but requires more code.
- Cesium Library: A powerful tool for geospatial visualizations, but heavier and more complex to learn.
- Map APIs (Google Maps, Mapbox): Allow adding 3D Earth view, but often require API keys and have free tier limitations.