@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