A standalone Kotlin Multiplatform library that renders an interactive 3D globe inside a WebView using Three.js. Exposes a single GlobeView composable that any Android app can drop in.
- Auto-rotating dark navy globe with lat/lon grid and star field
- Country borders — 177-country outlines from Natural Earth 110m data
- Current location marker — pulsing blue beacon with animated rings
- Destination markers — amber dots
- City labels — canvas-texture sprites that always face the camera
- Arc support — animated great-circle flight paths between coordinates
- Drag to rotate (touch + mouse), with rotation state fed back to Kotlin via bridge
- Tap a marker to get a callback
- Fully configurable colors, rotation speed, camera distance, atmosphere, grid, stars, borders
- Self-contained — Three.js r128 and country GeoJSON bundled in library assets, no CDN required
GlobeView(
markers = listOf(
GlobeMarker(id = "sfo", lat = 37.77, lng = -122.41, style = MarkerStyle.Current),
GlobeMarker(id = "tyo", lat = 35.68, lng = 139.69, style = MarkerStyle.Destination),
GlobeMarker(id = "hnl", lat = 21.30, lng = -157.85, style = MarkerStyle.Destination),
),
arcs = listOf(
GlobeArc(
from = Coordinates(37.77, -122.41),
to = Coordinates(35.68, 139.69),
)
),
onMarkerTapped = { marker -> Log.d("Globe", "tapped: ${marker.id}") },
modifier = Modifier.fillMaxSize()
)GlobeView(
config = GlobeConfig(
globeColor = "#0C1E3C",
gridColor = "#142D62",
atmosphereColor = "#1A4088",
currentDotColor = "#4A9EFF",
destinationDotColor = "#F5A623",
arcColor = "#4A9EFF",
backgroundColor = "#020B18",
showGrid = true,
showAtmosphere = true,
showStars = true,
showBorders = true,
borderColor = "#1E3A6E",
autoRotate = true,
autoRotateSpeed = 0.0022f,
cameraDistance = 5.0f,
)
)Add the dependency to your app module:
// app/build.gradle.kts
dependencies {
implementation("io.github.advait8:core-globe-android:0.1.0")
}Make sure mavenCentral() is in your repository list (it is by default in new projects):
// settings.gradle.kts
dependencyResolutionManagement {
repositories {
mavenCentral()
google()
}
}// settings.gradle.kts
include(":core-globe")// app/build.gradle.kts
dependencies {
implementation(project(":core-globe"))
}Add internet permission if loading anything remotely, and hardware acceleration on the Activity (required for WebView WebGL):
<activity
android:name=".MainActivity"
android:hardwareAccelerated="true" />| Layer | Detail |
|---|---|
| Language | Kotlin 2.1.0 · KMP |
| Android | minSdk 24 · targetSdk 35 |
| Renderer | Three.js r128 (bundled in assets) |
| Bridge | @JavascriptInterface + evaluateJavascript |
| UI | Jetpack Compose · AndroidView |
flyTo(Coordinates)— animated camera rotation to a target- iOS actual (
WKWebView) —expect/actualskeleton already in place - Arc
animationProgress— animated draw-on effect - Cluster markers at high zoom-out