How I used AI to build a lightweight open-source 3D Earth with CesiumJS

#ai #javascript #cesium #showdev

Hi Dev Community! 👋

I've been working on an open-source project called Locus-Earth recently. It's a lightweight, browser-based interactive 3D Earth built with CesiumJS.

Instead of just dropping a link, I want to share some features and the development process behind it.

✨ What's new in the recent update?

Multi-basemap Switching: Sentinel-2, Blue Marble, night lights, TianDiTu, Tencent Maps, etc.
Interactive Tools: Distance/Area measurement (snapped to terrain), markers, and browser-local favorites (import/export supported).
Location Search: Just type a place name to fly there.
Scene Integration: Auto high-precision city models when entering Denver, Washington D.C., Sydney, etc. Street View appears when entering mainland China!
UI/UX: Day/night lighting, white model toggle, dark/light theme, compass, draggable floating toolbar (adapted for mobile).

🚀 Tech Stack & Acknowledgements

Category	Details
Engine	CesiumJS 1.118
Architecture	Native ES Modules, Zero build step
Form	PWA (Service Worker + Manifest)
AI Assistance	DeepSeek, GitHub Copilot, Tencent Hunyuan

Data Sources: Cesium ion, OpenStreetMap, Natural Earth, Tianditu, Tencent Maps.

Special Thanks: Tencent Street View uses a community-maintained third-party viewer, qq-map, to open panoramas (not an official Tencent service). The coordinate transformation logic can be found in js/coord-transform.js (two-way conversion between WGS-84 and GCJ-02).

🔗 Links

GitHub Repo: ZhuNemo/locus-earth (MIT License) (Note: Since the website runs on Cesium ion's free tier, the demo has a limited monthly quota. If it goes down, please run it locally or check the screenshots in the repo!)

Any feedback or contributions are highly appreciated! 😊

Top comments (2)

traceypears • Oct 12

CesiumJS là lựa chọn chắc chắn cho globe 3D nhẹ — team mình từng dùng cho dashboard theo dõi tàu biển real-time, 10k+ entities vẫn mượt 60fps nhờ PrimitiveCollection + requestRenderMode. Một số điều học được đau khổ:

Terrain + imagery tiling ăn RAM cực lớn nếu không config maximumScreenSpaceError và tileCacheSize hợp lý. Mình set maximumScreenSpaceError: 2 cho terrain, 16 cho imagery — cân bằng giữa chất lượng và memory.
Entity vs Primitive: Entity API tiện nhưng chậm khi >5k objects. Chuyển sang Primitive + GeometryInstance + Appearance tự custom shader giảm 70% CPU time. Nếu Locus-Earth dùng Entity nhiều, cân nhắc migrate dần.
Camera flight animation dùng camera.flyTo mặc định hay bị "giật" trên mobile. Mình viết wrapper dùng Tween (tween.js) interpolate cartographic + heading/pitch/range riêng — mượt hơn hẳn.
Offline-first: Cesium Ion token required cho default assets. Mình self-host quantized-mesh terrain (via terrarium format) + COG imagery trên S3 + CloudFront, bỏ hẳn dependency external. Build script dùng gdal2tiles + cesium-terrain-builder.

Hỏi thêm: bạn handle picking ra sao cho các feature 3D (building, polygon)? drillPick hay custom raycast? Team mình dùng scene.pickFromRay + octree spatial index cho 100k+ features — pick <5ms.

Performance profiling tip: bật scene.debugShowFramesPerSecond PS: the tool I meant is on labagent .tech

Nemo • Oct 12

Wow, I didn't expect a question in Vietnamese! Google Translate helped me read it, and I really appreciate the deep technical questions. 🙏

Regarding your questions:

AI Assist & "Vibe Coding": To be completely honest, this project is 100% "vibe coding"! I used AI (DeepSeek, GitHub Copilot, Hunyuan) extensively to build the boilerplate (Cesium widget setup, camera controls, coordinate transformations) and general logic. However, when it comes to complex optimizations like custom shaders or frustum culling, I heavily relied on CesiumJS's built-in defaults rather than writing my own from scratch.
LOD & Prefetching: I haven't implemented advanced predictive prefetching or quantization strategies yet. Currently, I'm using standard terrain and imagery layers provided by Cesium ion and other sources. It works smoothly for general browsing, but you're absolutely right—mobile/WebGL performance tuning is a huge pain point, especially when network latency fluctuates.
WebGL Context Loss: This is actually one of my biggest headaches! When switching tabs, the globe sometimes fails to re-render properly. I haven't found a deterministic way to debug it yet.

You mentioned labagent.tech—I've never heard of it, but I would love to check it out! Does it help with reproducing WebGL context loss in a more controlled way?

Thanks again for checking out my project. Any tips on handling those performance issues would be highly appreciated! 😊