Globe — a WebGL Earth You Can Own

The Globe block renders a three-dimensional, draggable Earth that works beautifully as a hero backdrop. This post covers why it's built the way it is and the trade-offs that made the design stick.

The stack

three       → the renderer and geometry
@react-three/fiber → React bindings for Three.js
@react-three/drei   → helper primitives (orbit controls, materials)

React Three Fiber lets the rest of the tree stay declarative React while Three.js handles actual rasterization. The globe itself is a SphereGeometry mapped with a texture, lit by a directional light, and wrapped in OrbitControls so users can spin it.

Why WebGL

A CSS-only "globe" is usually a spinning sprite of a map — flat, and it stops looking convincing the moment the camera moves. WebGL gives real latitude/longitude distortion as the sphere rotates, plus free lighting and shadows.

Keeping it fast and SEO-safe

• The globe is client-only — it renders after hydration, so it never blocks first paint.
• It's wrapped in a <div> of fixed height that just defines space; the canvas fills it.
• No text or links live inside the globe, so there's nothing search engines miss.

Using it

import Globe from "@/components/craft-blocks/creative/globe1";

<div className="relative h-[30rem] overflow-hidden">
  <Globe />
</div>

Key takeaways

• Reach for WebGL when a visual needs a camera, lighting, or real 3D rotation.
• Keep heavy 3D behind the hero content and give it a fixed-size shell.
• Prefer loading the 3D bundle lazily (next/dynamic) when the globe is below the fold.