The latest articles on DEV Community by Nemo (@zhunemo). https://dev.to/zhunemo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4176240%2F254a0443-612c-4d0d-a8f7-f823db005856.jpg https://dev.to/zhunemo en Nemo Sun, 11 Oct 2026 05:42:02 +0000 https://dev.to/zhunemo/-46e6 https://dev.to/zhunemo/-46e6 <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb" class="crayons-story__hidden-navigation-link">How I used AI to build a lightweight open-source 3D Earth with CesiumJS</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/zhunemo" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4176240%2F254a0443-612c-4d0d-a8f7-f823db005856.jpg" alt="zhunemo profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/zhunemo" class="crayons-story__secondary fw-medium m:hidden"> Nemo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Nemo <div id="story-author-preview-content-4831397" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/zhunemo" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4176240%2F254a0443-612c-4d0d-a8f7-f823db005856.jpg" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nemo</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb" class="crayons-story__tertiary fs-xs"><time>Oct 11</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb" id="article-link-4831397"> How I used AI to build a lightweight open-source 3D Earth with CesiumJS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/cesium"><span class="crayons-tag__prefix">#</span>cesium</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline">&nbsp;reactions</span></span> </div> </a> <a href="https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> 4<span class="hidden s:inline">&nbsp;comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> </div> ai javascript opensource showdev Nemo Sun, 11 Oct 2026 05:41:42 +0000 https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb https://dev.to/zhunemo/how-i-used-ai-to-build-a-lightweight-open-source-3d-earth-with-cesiumjs-42hb <p>Hi Dev Community! 👋</p> <p>I've been working on an open-source project called <strong>Locus-Earth</strong> recently. It's a lightweight, browser-based interactive 3D Earth built with CesiumJS.</p> <p>Instead of just dropping a link, I want to share some features and the development process behind it.</p> <h2> ✨ What's new in the recent update? </h2> <ul> <li> <strong>Multi-basemap Switching</strong>: Sentinel-2, Blue Marble, night lights, TianDiTu, Tencent Maps, etc.</li> <li> <strong>Interactive Tools</strong>: Distance/Area measurement (snapped to terrain), markers, and browser-local favorites (import/export supported).</li> <li> <strong>Location Search</strong>: Just type a place name to fly there.</li> <li> <strong>Scene Integration</strong>: Auto high-precision city models when entering Denver, Washington D.C., Sydney, etc. Street View appears when entering mainland China!</li> <li> <strong>UI/UX</strong>: Day/night lighting, white model toggle, dark/light theme, compass, draggable floating toolbar (adapted for mobile).</li> </ul> <h2> 🚀 Tech Stack &amp; Acknowledgements </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td><strong>Engine</strong></td> <td>CesiumJS 1.118</td> </tr> <tr> <td><strong>Architecture</strong></td> <td>Native ES Modules, Zero build step</td> </tr> <tr> <td><strong>Form</strong></td> <td>PWA (Service Worker + Manifest)</td> </tr> <tr> <td><strong>AI Assistance</strong></td> <td>DeepSeek, GitHub Copilot, Tencent Hunyuan</td> </tr> </tbody> </table></div> <p><strong>Data Sources:</strong> <a href="https://cesium.com/ion/" rel="noopener noreferrer">Cesium ion</a>, <a href="https://www.openstreetmap.org/" rel="noopener noreferrer">OpenStreetMap</a>, <a href="https://www.naturalearthdata.com/" rel="noopener noreferrer">Natural Earth</a>, <a href="https://www.tianditu.gov.cn/" rel="noopener noreferrer">Tianditu</a>, <a href="https://map.qq.com/" rel="noopener noreferrer">Tencent Maps</a>.</p> <p><strong>Special Thanks:</strong> Tencent Street View uses a community-maintained third-party viewer, <a href="https://qq-map.netlify.app" rel="noopener noreferrer">qq-map</a>, to open panoramas (not an official Tencent service). The coordinate transformation logic can be found in <code>js/coord-transform.js</code> (two-way conversion between WGS-84 and GCJ-02).</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F03o7yz1fgvavyrlij8vs.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F03o7yz1fgvavyrlij8vs.jpg" alt=" " width="800" height="1778"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxor0fffg2msc75vzfwok.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxor0fffg2msc75vzfwok.jpg" alt=" " width="800" height="1778"></a></p> <h2> 🔗 Links </h2> <ul> <li> <strong>GitHub Repo</strong>: <a href="https://github.com/ZhuNemo/locus-earth" rel="noopener noreferrer">ZhuNemo/locus-earth</a> (MIT License) <em>(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!)</em> </li> </ul> <p>Any feedback or contributions are highly appreciated! 😊</p> ai javascript cesium showdev