前言最近两年AI 编程工具的发展速度远超所有人的预期。从 Copilot 到 Cursor再到 ClaudeCode Codex越来越多开发者开始思考一个问题当页面代码都能自动生成的时候前端工程师未来还剩下什么价值我最近刚好在研究一个有趣的方向Three.js Three-Geospatial 3D Tiles Renderer并尝试构建一个基于真实地理坐标系的三维世界。当我看到体积云漂浮在真实城市建筑上空的时候突然意识到AI 可以生成代码但创造一个世界依然需要开发者。最终效果展示先看最终实现效果。这里我实现了✅ 真实地理坐标系✅ 海量3D建筑加载✅ 体积云效果✅ 全球地图定位✅ 数字孪生场景基础能力当AI开始写代码后前端真正值钱的能力是什么过去前端的工作主要集中在管理后台电商页面数据展示表单系统而这些恰恰是 AI 最擅长的领域。一个 CRUD 页面。Cursor 几分钟就能生成。但是如果需求变成构建真实世界数字地球 支持体积云 支持城市级建筑 支持海量GIS数据 支持空间坐标定位 支持未来数字孪生扩展事情就完全不同了。因为这里已经不再是写页面。而是在构建一个复杂系统。涉及WebGL图形学GIS坐标转换渲染优化数据组织这才是未来前端越来越重要的方向。Three-Geospatial 是什么很多朋友第一次看到这个名字。我也是最近才接触到这个项目。官方定位非常简单为 Three.js 提供真实世界地理空间能力。为什么会有 Three-Geospatial因为 Three.js 和 GIS 世界本质上使用的是两套坐标系统。Three.jsx y zGISlongitude latitude height传统做法需要自己计算WGS84ECEFENU等坐标转换。过程非常复杂。而 Three-Geospatial 已经帮我们封装好了这些能力。开发者可以直接通过经纬度定位模型。例如const coordinate new GeodeticCoordinate( longitude, latitude, altitude )即可放置到真实世界。看看官方案例有多惊艳第一次打开官方案例时我非常震撼。因为整个场景已经具备数字地球的雏形。真实世界中的3D建筑如何加载解决坐标问题后。下一个问题建筑从哪里来这里使用3D Tiles Renderer这是目前 Three.js 生态中最成熟的 3DTiles 加载方案之一。它能够解析Cesium IonGoogle Photorealistic TilesOGC 3DTiles等数据源。相比 glTF。最大的优势是LOD 自动加载离得近加载高精度模型。离得远加载低精度模型。海量数据支持一个城市可能有几十万栋建筑。普通 glTF 根本无法加载。而 3DTiles 天生就是为城市级数据设计的。这里能够明显看到建筑细节会随着相机距离动态变化。这也是数字孪生项目常见的技术方案。体积云才是真正提升质感的关键很多人觉得建筑加载出来就结束了。实际上并不是。真正决定场景质感的是天空。于是我又加入了它能够模拟光照散射云层厚度阴影变化日夜变化整体架构设计职责划分模块作用Three.js渲染引擎Three-GeospatialGIS坐标3D Tiles Renderer建筑加载Volume Cloud云层效果PostProcessing后处理AI时代下前端真正稀缺的能力体验完整个项目之后。我越来越相信未来最容易被 AI 替代的。是重复编码。而最难被替代的。是系统设计能力图形学能力工程架构能力创造能力AI 可以帮你写for() if() axios()但 AI 很难告诉你如何把真实世界映射到三维空间中。更难帮你决定这个世界最终应该长什么样。写在最后过去我们做的是网页。未来我们可能做的是数字城市数字孪生空间计算AI 世界而 Three.js Three-Geospatial 3D Tiles Renderer 的组合。让我第一次感受到前端的边界已经不再只是浏览器里的页面。而是真实数字世界本身。参考文献Three.js官方示例https://threejs.org/examples/Takram : https://takram-design-engineering.github.io/three-geospatial/?path/docs/readme--docs3DTilesRendererJS: https://github.com/NASA-AMMOS/3DTilesRendererJS结合真实项目http://threeflowx.cn/editWebGIS/#/
