Globe
Interactive 3D globe with animated arcs and location markers
globe-tw
Customize
0.85
3
0.25
0.15
1
10
6000
2000
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | "auto" | "auto" | Width of the globe container in pixels, or "auto" to match parent width |
| height | number | "auto" | "auto" | Height of the globe container in pixels, or "auto" to match width |
| primaryColor | string | "rgb(59, 130, 246)" | Color for animated arcs and labels (any valid CSS color) |
| neutralColor | string | "rgb(156, 163, 175)" | Color for land dots and atmosphere (any valid CSS color) |
| atmosphereColor | string | undefined | Color for atmosphere (defaults to neutralColor) |
| showAtmosphere | boolean | true | Show atmosphere glow around the globe |
| autoRotateSpeed | number | 0.85 | Auto-rotation speed (0 = no rotation, higher = faster) |
| enableZoom | boolean | false | Enable zoom controls via mouse wheel |
| interactive | boolean | true | Whether the globe is interactive |
| arcCount | number | 10 | Number of animated arcs to show at once |
| arcInterval | number | 6000 | Interval between arc animations in milliseconds |
| arcAnimationDuration | number | 2000 | Duration of arc dash animation in milliseconds |
| cameraAltitude | number | 2 | Altitude of the camera view (higher = further away) |
| pointSize | number | 0.25 | Size of the land dots |
| pointResolution | number | 5 | Resolution of the points |
| atmosphereAltitude | number | 0.3 | Altitude of the atmosphere |
| globeOpacity | number | 1 | Opacity of the globe material |
| landDotRows | number | 200 | Number of rows for land dot grid (higher = more detail) |
| landMapUrl | string | "https://unpkg.com/three-globe@2.31.1/example/img/earth-topology.png" | URL of the land map image for dot placement |
| className | string | undefined | Additional class name for the container |
| onReady | () => void | undefined | Callback fired when globe is initialized and ready |
| onGlobeClick | (coords: { lat: number; lng: number }, event: MouseEvent) => void | undefined | Callback when globe is clicked |