This interactive 3D Earth is an original WebGL experience built with Three.js (r128). It combines NASA-style blue marble imagery, elevation bump mapping, ocean specular highlights, a separate cloud layer, and a custom atmospheric rim shader so the globe reads clearly on dark backgrounds—useful for geography education, science outreach, and portfolio pages that need a memorable hero.

Try the live globe

Drag with the mouse to orbit; use the scroll wheel to zoom. The demo runs entirely in the browser—no plugins required.

What makes this implementation SEO-friendly

• Semantic HTML around the embed (figure, figcaption, headings) so crawlers understand the topic: Earth, WebGL, Three.js.
• Self-contained article page with descriptive text above and below the iframe—search engines still index meaningful copy even when the canvas is inside an iframe.
• Lazy loading on the iframe to protect Core Web Vitals on listing pages that link here.

Technical stack (for developers)

Rendering uses a WebGLRenderer with physically based lighting cues (directional “sun” + ambient fill), OrbitControls for camera interaction, and textures loaded from a CDN. The atmosphere is a second sphere with a fragment shader that mixes Fresnel-style rim lighting with a subtle blue tint—classic “pale blue dot” presentation without heavy post-processing.

If you are building a multilingual site, pair this hub layout with localized titles and excerpts (as on aogl.cn) so each language URL can rank for its own queries while sharing one canonical interactive asset.

Why I keep this demo on aogl.cn

I originally built the globe as a one-off HTML file under original/earth/ and only later wrapped it in this article. The split matters: the iframe stays a stable asset I can swap without touching seven language shells, while this page carries the narrative Google AdSense reviewers actually read—what I tried, what I rejected, and which files are authoritative. That is the difference between “embed only” and “substantive page” in my workflow.

First pass and what I threw away

My first prototype used a flat UV sphere with a single diffuse map and no clouds. It looked fine in screenshots but felt plastic when you orbited: no specular break on oceans, no limb glow, and the terminator was a hard cut. I also tried loading six 8K tiles locally; on a mid-range laptop the first interaction stuttered for two seconds while textures decoded. The version you see now trades maximum resolution for predictable load—CDN-hosted 2K-class maps, one cloud shell, and a lightweight rim shader instead of a full post stack.

Files I treat as source of truth

• original/earth/interactive-3d-earth.html — the embed target (OrbitControls, renderer loop).
• Blue-marble color, bump, and specular maps referenced inside that file (hosted URLs documented in the demo’s comments).
• original/Gemini_Generated_Image_r5r2i4r5r2i4r5r2.png — hero still for social cards when I do not want a live WebGL capture.

When I update textures I change the demo first, re-screenshot if needed, then bump dateModified on the article JSON so humans and crawlers see the same revision date.

Interaction and accessibility choices

Orbit is mouse-only in the embed; I considered touch gestures but kept the scope small so the script stays readable. The article page itself is keyboard-friendly: headings, figure/figcaption, and this prose all sit outside the iframe. If you ship something similar, duplicate that pattern—never put your only explanatory text inside the canvas document.

What I would do next

Time permitting I will add a short “known limits” list inside the embed (polar pinch, no night lights) and link outward to the eight-planet texture atlas article where I document equirectangular assets for the rest of the solar system. For now this page’s job is to prove the globe is maintained, not to compete with NASA’s own apps.

Atmosphere shader in one paragraph

The rim glow is a Fresnel-weighted mix: facing the camera gets less tint, grazing angles pick up a saturated blue. I keep intensity low so the effect reads on dark article backgrounds without blowing out Africa on the day side. No bloom pass—just one extra draw call for the atmosphere shell—so mid-tier GPUs stay smooth when the iframe is only part of a long article page.

Texture pipeline and CDN

Color, bump, and specular maps load from stable HTTPS URLs referenced in the demo source. When a CDN hiccups, the globe still renders with flat color but loses relief; I note that in comments so future-me does not chase a “broken shader” that is really a 404 on bump. Specular is masked to oceans only so continents do not look wet. Clouds rotate slightly faster than the surface for parallax separation—a cheap trick that reads better than a single shell.

Publishing checklist (Earth-specific)

• Article prose outside iframe explains stack, limits, and file paths.
• iframe loading="lazy" on listing pages; eager only if this URL is opened directly.
• dateModified bumped when demo textures or controls change.
• Cross-link to planet atlas for readers who want real ephemeris data, not a toy globe.

That checklist mirrors what I already do on composite articles—consistent maintainer voice across the twelve originals matters more than one perfect WebGL demo in isolation.