Interactive 3D globe in a WebView with auto-rotation, lat/lon grid, country borders, markers (current/destination), city labels, animated flight arcs, customizable styling and tap callbacks.
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.
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(, -),
to = Coordinates(, ),
)
),
onMarkerTapped = { marker -> Log.d(, ) },
modifier = Modifier.fillMaxSize()
)
GlobeView(
config = GlobeConfig(
globeColor = "#0C1E3C",
gridColor = "#142D62",
atmosphereColor = "#1A4088",
currentDotColor = "#4A9EFF",
destinationDotColor = "#F5A623",
arcColor = "#4A9EFF",
backgroundColor = "#020B18",
showGrid = true,
showAtmosphere = ,
showStars = ,
showBorders = ,
borderColor = ,
autoRotate = ,
autoRotateSpeed = ,
cameraDistance = ,
)
)
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" />
flyTo(Coordinates) — animated camera rotation to a targetWKWebView) — expect/actual skeleton already in placeanimationProgress — animated draw-on effect| 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 |
Surfaced from shared tags and platforms — no rankings paid for.