【学习工作赛道】学习工作
【标题】3D Earth 全球地理探索 Demo
【正文】
大家好，我是一名正在学习用 AI 工具开发项目的大学生创作者。
这个 Demo 是我和 TRAE 一起完成的 3D 地球交互项目。最开始我只是想做一个“能像真实地球一样旋转、缩放、查看地理信息”的网页，但自己对 Three.js、Shader、地理数据处理并不熟。开发过程中，我把想法一点点告诉 TRAE，比如“地球太暗了”“河流点击后要显示信息”“演示模式不要穿进地球内部”“太空夜景要更真实”等，TRAE 帮我拆分任务、修改代码、跑构建检查，并不断根据截图反馈做调整。
让我印象最深的是，很多原本以为很复杂的问题，比如 3D 地球、地形质感、河流山脉交互、搜索定位、演示模式，都可以通过自然语言一步步推进完成。
1. Demo 简介
这是一个基于 Web 的 3D 地球交互展示网站。
面向用户：地理学习者、老师、学生、科普内容创作者，以及需要做地球可视化演示的人。
主要功能：
-
3D 地球浏览
支持旋转、缩放、切换全球、亚洲、欧洲、南美、北美、非洲等快捷视角。 -
地理图层交互
支持河流、山脉、国家边界、大气层、云层、夜间灯光等图层开关，并能记住用户上次选择。 -
地理对象查询与信息面板
可以搜索黄河、黑龙江、长江、珠穆朗玛峰等地理对象，点击后自动飞行到目标位置，并显示名称、长度、流域、流经地区、海拔、山脉等信息。 -
演示模式
自动飞行展示亚洲、欧洲、南美、北极等区域，适合课堂演示或作品展示。
2. Demo 创作思路
灵感来源：
我想做一个比普通地图更有沉浸感的地理学习工具。传统地图虽然信息完整，但视觉上不够直观；而 3D 地球可以让用户更容易理解大陆、海洋、山脉、河流之间的空间关系。
想解决的问题：
普通地理学习工具存在几个问题：
-
地理对象之间的空间关系不够直观；
-
河流、山脉、国家边界等信息分散；
-
很多 3D 地球 Demo 只是展示模型，缺少可点击、可搜索、可讲解的交互；
-
演示时需要手动拖动视角，不适合教学或展示。
为什么做这个方向：
我希望这个 Demo 既能看起来有真实地球的视觉效果，又能真正用于学习和讲解，所以没有只做炫酷动画，而是重点做了搜索、图层、信息面板、演示路线、加载体验和数据校验。
3. Demo 体验地址
当前为8K，16K版本暂未上传
4. TRAE 实践过程
-
我主要通过 TRAE 完成了以下开发流程：
-
项目搭建
使用 Vite + React + TypeScript + Three.js 搭建 3D 地球项目结构，配置基础组件、状态管理和资源目录。 -
3D 地球核心开发
实现地球纹理、云层、大气层、星空背景、相机控制、缩放旋转，以及不同视觉模式。 -
地理数据接入
接入河流、山脉、国家边界等数据，并处理点击识别、搜索索引、信息面板展示。 -
交互体验优化
增加图层控制、推荐组合、快捷视角、演示模式、搜索飞行、Loading 资源进度。 -
视觉质量调优
多次根据截图反馈调整地球颜色、海洋颜色、植被颜色、夜间灯光、电影地形、极地冰盖、河流高光和山脉标记。 -
质量检查
通过 TRAE 运行并修复：
npm run lint
npm run build
npm run check:data -
-
附
-
3207704525931955:9b02a67a00ccd03425d79ddb2d72af9f_6a43bc2ad9d0da29d408179b.6a43ddf9fdf3d2b453183087.6a43ddf8fdf3d2b453183085:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/30 23:17:13)
3207704525931955:9ed7006f7daa1df107d6caa893e3d383_6a43bc2ad9d0da29d408179b.6a44ca3700696a1b9aee5c13.6a44ca3700696a1b9aee5c11:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/1 16:05:11)
3207704525931955:8d9dc0deb3c52b835c92cdf63f935735_6a43bc2ad9d0da29d408179b.6a4667ede420035202c3b928.6a4667ede420035202c3b926:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/2 21:30:21)
3207704525931955:70aaf88e746640af878578fc519e3418_6a43bc2ad9d0da29d408179b.6a4672bae420035202c3ba89.6a4672b9e420035202c3ba87:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/2 22:16:26)
3207704525931955:208d86ece2b916e21659dbff074204ec_6a43bc2ad9d0da29d408179b.6a474ade6fb5722efb58a394.6a474ade6fb5722efb58a392:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/3 13:38:38)
5. 对应的报名审核通过的帖子链接