A lightweight, framework-agnostic 3D globe visualization library powered by Three.js. Display animated arc and ripple events, land masses with H3 hexagon tessellation, and atmospheric glow effects.
- 🌍 Interactive 3D globe with orbit controls
✈️ Animated arc events between geographic coordinates- 💫 Standalone ripple events at any geographic coordinate
- 🗺️ GeoJSON-based land visualization with H3 hexagons
- 🌌 Atmospheric glow and configurable globe materials
- 🎨 Fully customizable colors and animations
- 📦 Framework wrappers: TypeScript, React, Vue, Svelte, Solid
npm install @event-globe/tsimport { EventGlobeRenderer } from '@event-globe/ts'
const container = document.getElementById('globe')
const renderer = new EventGlobeRenderer(container, {
autoRotate: true,
globe: {
globeColor: '#3a228a',
showLandPolygons: true,
}
})
const event = renderer.addEvent('arc', {
lat: 40.7128,
lng: -74.0060,
endLat: 51.5074,
endLng: -0.1278,
showEndRipple: true,
})
renderer.addEvent('ripple', {
lat: 34.0522,
lng: -118.2437,
color: '#DD63AF',
})
event.removed.then((result) => {
console.log(event.event, result.reason)
})| Package | Description |
|---|---|
| @event-globe/core | Framework-agnostic Three.js component |
| @event-globe/ts | Managed renderer with controls |
| @event-globe/react | React wrapper |
| @event-globe/vue | Vue 3 wrapper |
| @event-globe/svelte | Svelte wrapper |
| @event-globe/solid | Solid.js wrapper |
See individual package READMEs for detailed documentation:
This project was inspired by and builds upon the following excellent works:
MIT