Three.js Globe
Overview
Three.js brings hardware-accelerated 3D graphics to every modern browser. This showcase renders an interactive particle globe with 3,000 data points, animated connection arcs between world cities, and real-time renderer statistics — all running at 60fps with no plugins or downloads required.
Technical Approach
Fibonacci Sphere Distribution
The globe's particles are distributed using a Fibonacci sphere algorithm, which produces an even distribution of points on a sphere surface without clustering at the poles (a common problem with latitude/longitude grids). Each of the 3,000 points is rendered as a vertex in a single THREE.Points geometry with per-vertex coloring.
Connection Arcs
Ten city-to-city connections are rendered as quadratic Bezier curves elevated above the globe surface. The midpoint of each arc is raised proportionally to the great-circle distance between endpoints, creating natural-looking flight-path arcs. Each arc pulses in opacity on a staggered cycle to create a sense of live data flow.
Additive Blending
Both particles and arcs use THREE.AdditiveBlending, which makes overlapping bright elements glow brighter rather than occluding each other. Combined with depth-write disabled on the particle material, this creates the characteristic "data visualization" aesthetic without any post-processing passes.
ES Module CDN Loading
Three.js r172 is loaded via ES module import maps from the jsDelivr CDN — no bundler required. The <script type="importmap"> tag maps "three" to the CDN URL, and the demo's module script uses standard import syntax. This is the officially recommended approach from the Three.js documentation.
Mobile Optimization
The showcase detects touch devices and automatically adjusts for performance:
- Particle count: 3,000 → 1,500 on mobile
- Arc count: 10 → 6 on mobile
- Pixel ratio: Capped at 1.5x (vs 2x on desktop)
- Interaction: Drag rotation disabled; auto-rotate with touch-to-pause
- GPU hint:
powerPreference: 'low-power'to favor battery life
Real-World Applications
Global SaaS Platforms
Companies like Stripe, Cloudflare, and Vercel use globe visualizations to show their network reach. Real-time data points and connection arcs communicate scale instantly.
Logistics & Supply Chain
Shipping companies and supply chain platforms visualize routes, warehouse locations, and delivery networks on interactive globes. Drag to explore, click to drill down.
Cybersecurity Dashboards
Security operations centers display threat origins, attack vectors, and network traffic as animated arcs on a globe. Real-time data makes the invisible visible.
Travel & Hospitality
Airlines and hotel chains use globe interfaces for destination exploration. Hover a city to see routes, prices, and availability without leaving the page.