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(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 targetWKWebView) — expect/actual skeleton already in placeanimationProgress — animated draw-on effect
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(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 targetWKWebView) — expect/actual skeleton already in placeanimationProgress — animated draw-on effect