Frontend · GIS · AI Programming

A Typhoon Tracker Gets a 3D Globe and a Blender-Built Storm Model

By LukeSuperCoder · Jul 24, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Placing a custom 3D model on a Mapbox Globe with smooth path interpolation and synchronized multi-element playback is a practical WebGIS pattern that applies to any moving-asset visualization—storm tracking, flight paths, or fleet monitoring. The Blender-to-Mapbox pipeline and the hard-won fixes for origin drift, cache poisoning, and model invisibility save real engineering hours for anyone attempting the same integration.

Summary

A 3D upgrade to an existing open-source typhoon tracker replaces the flat map with a Mapbox Globe projection and a custom GLB cloud system model built in Blender. The model moves along interpolated historical and forecast paths, synchronized with wind circles, a HUD, and camera controls through a single playback engine. Three camera modes—free, follow, and a four-stage presentation sequence—let users observe the storm's scale and direction from spatial perspectives a 2D map cannot provide. The project also implements three performance tiers, a 2D fallback when the model fails to load, and a layered update strategy that throttles wind circles and camera moves independently from the model's position. The write-up details the Blender-to-Mapbox asset pipeline: cleaning and centering a Sketchfab model, applying transforms, managing vertical structure for low-angle viewing, merging materials, and hitting a sub-1.5 MB GLB with Draco compression. On the Mapbox side, it covers GeoJSON-driven model layers, the reasoning behind 28,000x scale and 120 km elevation offsets, longitude interpolation across the antimeridian, and cache-busting with URL version parameters.

Takeaways

— All visual elements—model, wind circles, HUD, camera—consume a single TrackState from a unified playback engine to prevent desynchronization.

— Mapbox's native model layer accepts a GeoJSON Point with a modelUri property, avoiding the coordinate-system overhead of a Three.js custom layer.

— A Blender model's origin must sit exactly at the typhoon center and be moved to world origin (0,0,0) before export, or the model will orbit an offset point on the globe.

— Applying Rotation & Scale in Blender bakes the visual state into the GLB; skipping it causes unexpected stacking of web-side model-rotation and model-scale values.

— The GLB is a visual symbol, not a meteorological simulation—horizontal scale is exaggerated to ~28,000x and the model is elevated 120 km to keep rain and lightning above the terrain.

— Longitude interpolation must handle the 180°/-180° antimeridian by choosing the shortest rotation direction, or the model will spin the long way around the globe.

— Follow mode calculates a movement bearing from position deltas, falls back to API-reported direction when displacement is too small, and uses shortest-angle lerp to avoid 358° camera spins.

— Presentation mode splits playback progress into four fixed shots (global, medium, close-up, pull-back) without a keyframe system, producing natural cinematic transitions.

— Camera updates are throttled to ~220ms while the model moves every frame; both read the same state but update at different rates to avoid jitter and GPU pressure.

— GLB load failure triggers a fallback to a DOM-based 2D eye marker—the 3D model is an enhancement layer, not a single point of failure for the typhoon data.

— Three layers of caching (browser HTTP, Service Worker, Mapbox Worker) mean a replaced GLB file often won't appear until a URL version parameter is changed.

— A model that loads successfully can still be invisible due to tiny scale, subsurface height, near-transparent materials, layer occlusion, or stale [0,0] coordinates.

Conclusions

Separating the GLB's visual scale from the wind circles' real kilometer radii is a clean design decision that avoids the trap of trying to make a 3D model physically accurate at the cost of legibility.

The insistence that 3D rendering must not become a prerequisite for business correctness—paths, forecasts, and warnings still work when the model fails—is a production-hardening principle that many flashy WebGL demos ignore.

Using a URL version parameter as a deliberate cache-busting mechanism across three independent cache layers is a small, high-leverage practice that prevents hours of 'why is my new model not showing' debugging.

The four-stage presentation camera—global, medium, close-up, pull-back—achieves cinematic pacing with four hardcoded shot objects and no keyframe system, a refreshingly low-complexity alternative to animation libraries for data-driven storytelling.

Concepts & terms

Mapbox model layer

A native Mapbox GL JS layer type that renders a 3D glTF or GLB model at a GeoJSON Point location, handling globe projection, lighting, and occlusion without a separate Three.js scene.

Draco compression

A mesh compression library from Google that dramatically reduces the file size of 3D geometry in glTF/GLB files, at the cost of client-side decompression time.

TrackState

A single state object containing the current interpolated position, timestamp, intensity, and movement direction of the typhoon, consumed by all visual and data layers to guarantee synchronization.

Antimeridian interpolation

A technique for interpolating longitude values across the 180°/-180° line by choosing the shorter rotational direction, preventing a moving object from taking the long way around the globe.

From the discussion

The thread is thin—a single project link, a compliment, and a lament about low engagement that the author shrugs off. No technical debate or substantive exchange emerges.

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗