Skip to main content
A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.

​
Installation

npm install three postprocessing three-globe
npm install -D @types/three

​
Download GeoJSON file

Download a GeoJSON file containing the globe’s geographical data from GeoJSON Maps by customizing the continents and detail level. Save the downloaded file as globe.json in the same folder as your component.

​
Usage

<script setup lang="ts">
import { GithubGlobe } from '@/components/visualization'

const globeConfig = {
  pointSize: 1,
  globeColor: '#1d072e',
  showAtmosphere: true,
  atmosphereColor: '#ffffff',
  atmosphereAltitude: 0.1,
  autoRotate: true,
  autoRotateSpeed: 0.8,
}

const data = [
  {
    order: 1,
    startLat: 40.7128,
    startLng: -74.0060,
    endLat: 51.5074,
    endLng: -0.1278,
    arcAlt: 0.3,
    color: '#ff0000',
  },
]
</script>

<template>
  <GithubGlobe :globe-config="globeConfig" :data="data" />
</template>

​
Props

Prop NameTypeDefaultDescription
globeConfigobject{}Configuration options for the globe, including colors, atmosphere, rotation speed, and lighting.
dataPosition[][]Array of positions representing arcs and points on the globe, with latitude, longitude, color, etc.
classstring""Additional CSS classes for custom styling.

​
globeConfig Properties

PropertyTypeDefaultDescription
pointSizenumber1Size of individual points on the globe.
globeColorstring"#1d072e"Color of the globe surface.
showAtmospherebooleantrueWhether to display atmosphere around the globe.
atmosphereColorstring"#ffffff"Color of the atmosphere around the globe.
atmosphereAltitudenumber0.1Altitude of the atmosphere layer.
emissivestring"#000000"Emissive color for the globe material.
emissiveIntensitynumber0.1Intensity of the emissive color.
shininessnumber0.9Shininess of the globe material.
polygonColorstringrgba(255,255,255,0.7)Color of polygon boundaries on the globe.
arcTimenumber2000Duration for arcs animation.
arcLengthnumber0.9Length of arcs on the globe.
ringsnumber1Number of rings to display per point.
maxRingsnumber3Maximum rings around each point.
initialPositionobject{ lat: 0, lng: 0 }Initial latitude and longitude for the globe’s position.
autoRotatebooleanfalseAutomatically rotate the globe.
autoRotateSpeednumber0.8Speed of auto-rotation when enabled.

​
data Structure (Position)

FieldTypeDescription
ordernumberOrder of the point or arc for sequencing.
startLatnumberStarting latitude for an arc.
startLngnumberStarting longitude for an arc.
endLatnumberEnding latitude for an arc.
endLngnumberEnding longitude for an arc.
arcAltnumberAltitude of the arc (determines arc height).
colorstringColor of the arc or point in hex or RGB format.

​
Credits

  • Built with Three.js and Three Globe libraries, designed for global data visualizations and dynamic effects
  • Ported from Aceternity UI

Build docs developers (and LLMs) love

Get started for freeTalk to us