AI时代下还剩下什么？我用 Three.js + Three-Geospatial 实现一个真实环境的3D地球世界
前言
最近两年，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.js：
x y zGIS：
longitude latitude height传统做法需要自己计算：
- WGS84
- ECEF
- ENU
等坐标转换。
过程非常复杂。
而 Three-Geospatial 已经帮我们封装好了这些能力。
开发者可以直接通过经纬度定位模型。
例如：
const coordinate = new GeodeticCoordinate( longitude, latitude, altitude )即可放置到真实世界。
看看官方案例有多惊艳
第一次打开官方案例时我非常震撼。
因为整个场景已经具备数字地球的雏形。
真实世界中的3D建筑如何加载？
解决坐标问题后。
下一个问题：
建筑从哪里来？
这里使用：
3D Tiles Renderer
这是目前 Three.js 生态中最成熟的 3DTiles 加载方案之一。
它能够解析：
- Cesium Ion
- Google Photorealistic Tiles
- OGC 3DTiles
等数据源。
相比 glTF。
最大的优势是：
LOD 自动加载
离得近：
加载高精度模型。
离得远：
加载低精度模型。
海量数据支持
一个城市可能有几十万栋建筑。
普通 glTF 根本无法加载。
而 3DTiles 天生就是为城市级数据设计的。
这里能够明显看到：
建筑细节会随着相机距离动态变化。
这也是数字孪生项目常见的技术方案。
体积云才是真正提升质感的关键
很多人觉得：
建筑加载出来就结束了。
实际上并不是。
真正决定场景质感的是天空。
于是我又加入了：
它能够模拟：
- 光照散射
- 云层厚度
- 阴影变化
- 日夜变化
整体架构设计
职责划分：
| 模块 | 作用 |
|---|---|
| Three.js | 渲染引擎 |
| Three-Geospatial | GIS坐标 |
| 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--docs
3DTilesRendererJS: https://github.com/NASA-AMMOS/3DTilesRendererJS
结合真实项目：http://threeflowx.cn/editWebGIS/#/