@aeryflux/globe

Portable 3D globe component for React and React Native (Expo).

Live Demo

Features

• Cross-platform: Works on web (React) and mobile (Expo)
• Three.js powered: High-quality 3D rendering with WebGL
• Customizable themes: Dark, Green, White surfaces
• Data visualization: Highlight countries with custom colors
• City markers: 185 major cities with hexagonal borders
• WebGL fallback: Graceful degradation when WebGL unavailable
• Bundled models: Pre-generated GLB files with 169 countries and 185 cities

Installation

npm install @aeryflux/globe three

Usage

React (Web)

import { Globe } from '@aeryflux/globe/react';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Globe
        surface="green"
        showCountries={true}
        rotationSpeed={0.0005}
      />
    </div>
  );
}

React Native (Expo)

import { buildGlobeIndex, applyGlobeMaterials } from '@aeryflux/globe/react-native';
import { GLView } from 'expo-gl';
import { Renderer } from 'expo-three';

// See documentation for full Expo implementation
// Reference: Atlas GlobeBackground.tsx

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | surface | 'dark' \| 'green' \| 'white' | 'green' | Color theme | | showCountries | boolean | false | Show country fills | | showCities | boolean | false | Show city markers with borders | | rotationSpeed | number | 0.0003 | Globe rotation speed | | glowIntensity | number | 0.5 | Border glow intensity | | bloomStrength | number | 0.3 | Post-processing bloom | | countryData | CountryDataMap | - | Data-driven highlights | | modelUrl | string | bundled | Custom GLB model URL |

Bundled Models

| Model | Size | Use Case | |-------|------|----------| | atlas_hex_subdiv_5.glb | 2MB | Mobile | | atlas_hex_subdiv_6.glb | 7.2MB | Desktop (with cities) | | weather_hex_globe_subdiv_3.glb | 212KB | Weather overlay |

Desktop model includes 185 major cities with hexagonal borders centered in hex cells.

Data Visualization

import { Globe } from '@aeryflux/globe/react';

const countryData = {
  France: { scale: 0.8, color: '#ef4444' },
  Japan: { scale: 0.6, color: '#3b82f6' },
  Brazil: { scale: 1.0, color: '#22c55e' },
};

<Globe
  surface="dark"
  showCountries
  countryData={countryData}
  dataHighlightColor="#00ff88"
/>

Surfaces

| Surface | Accent | Background | Countries | |---------|--------|------------|-----------| | dark | White | #050508 | Light gray | | green | #00ff88 | #050508 | Light gray | | white | Black | #ffffff | Light gray |

License

MIT - Created by AeryFlux

Credits

• Three.js - 3D rendering
• geojsonto3D - Globe model generation
• Natural Earth - Geographic data