在线体验: 太阳系探索器 | 3D交互式天文教育 | 何健个人网站
https://traesolar-system-standalonec6zn.vercel.app
作者:何健(爸爸)+ 何零壹(初二儿子)
技术栈:TRAE SOLO · Next.js 14 · Three.js · @react-three/fiber · TypeScript
周期:连着三周,从"自定义天体翻车" → “三体翻车” → “太阳系上线”
开源仓库:
摘要
用 TRAE SOLO 陪初二的儿子,从他的一个学弟在课上的一句嘟囔开始——
“书上那张太阳系图是平的,有啥看头?能不能真的转起来、点进去看?”
儿子把这话当了真,回家第一句话就是:"爸爸,这个能做吗?"于是拉着一个多年没写过代码的 IT 爸爸和 SOLO,三个周末做出了一个基于真实 NASA JPL 天文数据的 3D 太阳系探索器:八大行星按真实轨道运行、主要卫星全覆盖、还能自己画一颗小行星扔进太阳系(开普勒第三定律真·算出公转周期)。
整个链路是:儿子带头 → 爸爸配合 → SOLO 实现 → 儿子验收挑刺。做完之后,他主动拿去分享给同学和老师;老师把链接发给全班。当初那位嘟囔"图是平的"的学弟,据说在走廊里围着儿子问了半天。
之前我在 【Hello AI 科技致善】普通父母也能陪孩子学 AI:我用 SOLO 陪两个孩子做了一整个亲子网站(hj1982.cn) 里提过这个项目。那篇发完之后,评论区真有朋友来问源码,我才意识到这个小作品可以不只属于我家，也可以属于喜爱它的人们。于是决定把它单独拎出来、单独开源——发给所有想陪孩子做点什么、但又觉得"自己不行"的爸妈。
背景:一个"多年没写代码的 IT 爸爸",和一个"爱琢磨的初二少年"
我的真实身份:公立医院信息科人员,平时做的是管理,写 PPT、开协调会、跑项目,已经很久没有手写代码。真的要我下班后从 0 学 Three.js、搭 3D 场景陪孩子——坦白讲,SOLO 出现之前,这事我连想都不敢想。
儿子那边:对天体一直有执念。刘慈欣翻过不止一遍,天天跟我念叨"三体是不是真的没有解"。
触发点是一个学弟。初一地理课正好学到太阳系那一章。儿子的一个学弟下课后跟他嘟囔:
“书上那张图是平的,能不能真的转起来、点进去看?”
儿子听完,当天回家就问我:"爸爸,这个能做吗?“我心里一凉——能做,但按老办法大概要几个月。我犹豫地说了一句"爸爸想想办法”,他大概听出了我的虚,马上加了一句:
“不用你一个人做,我跟你一起。”
那一刻我决定,用 SOLO 试一下。——这件事,我一个人做不了,但我们俩加上 SOLO,也许可以。
实践过程:三周,多次翻车,一次上线
和很多"一气呵成"的分享帖不一样,我们这个项目其实翻过两次车。真实过程原样讲出来,也许对后面想陪孩子做东西的爸妈更有用。
第一个周六:儿子想做"自己的星系" → 翻车 
儿子第一次提的需求其实不是太阳系,是自定义天体:
“爸爸,能不能做一个我自己设定的星系?我放几颗星球进去,它们自己绕来绕去。”
我把这话原样丢给 SOLO。SOLO 很快给出了一版——结果跑起来不到 几 秒,几颗星球啪地一下飞出屏幕,像被什么东西弹开了。
- 第一反应以为是 bug,让 SOLO 修。
- 改了几轮才搞明白:这根本不是代码的问题,是物理问题——用户乱填的轨道参数(质量/初速度/距离)对星系中微妙的引力填信息来说根本不合适",稍微不配套,数值积分就爆炸,天体直接飞出宇宙。
- 这时候才理解:物理上的"稳定轨道"是有很窄的参数窗口的,不是随便画两颗球就能转起来的。
儿子:“那我算了,我不当上帝了。”
第一个周日:儿子想做"三体" → 又翻车
刘慈欣粉都懂——不做自定义,那来点"有纪念意义的":三体。
“爸爸,我们做三颗恒星互相绕的那种!”
SOLO 老老实实写了三体引力计算。结果:
- 三体问题本身就是混沌的,没有解析解,数值模拟跑几圈一定会崩。
- 要么三颗星黏在一起变成一颗大火球,要么其中一颗被弹飞到无穷远。而且还没有几个卫星。
- 我们尝试过加边界、加约束、加"重置机制",但每次崩的时间点都让儿子抓狂:“还没看够就炸了!”
两次翻车的共同教训:
别让 AI 帮你解数学上就没有稳定解的问题——它能写代码,不能改变物理。
第一周末:退一步海阔天空——做真实太阳系 
儿子自己总结的:“要不我们做一个反正现实里就转得好好的那种?”
于是,真实太阳系这个命题正式立项。这次的项目,我要求他写得更具体:
"做一个 Web 端 3D 太阳系,面向初中生。
技术栈:Next.js 14 + Three.js + @react-three/fiber + TypeScript。（这个是问的AI）
八大行星按真实轨道参数,用 NASA JPL 的数据;
距离可以压缩方便看(给个’真实 / 夸张’切换开关);
这一版 SOLO 基本一次跑通——前两次翻车攒的经验,这时候全都变成了具体约束。
然后就是踩坑 & 打磨 
真实太阳系稳定了,但立刻冒出新的问题。真实地列出来,给后来者少走弯路:
| 坑 | 原因 | 解决方式 |
|---|---|---|
 卫星太大,挡住了行星 |
按真实比例看不见,放大了又遮主星 | 加 satelliteScale 全局系数,默认放大,可在 UI 手动调 |
 行星太小,根本看不到 |
真实比例下地球在屏幕上就一个像素点 | 加"真实 / 夸张"两档切换,默认夸张模式 |
 自转一会太快一会太慢 |
useFrame 里时间倍率和单位没对齐 |
全局时间总线,所有运动共用 timeScale |
 纹理偶尔加载失败,变成一堆黑球 |
2K 纹理跨网络加载,会有失败 | 双纹理系统:先加载真实纹理,失败自动降级到程序化 Canvas 纹理,永不空白 |
 手机切后台再回来会崩 |
WebGL 上下文丢失 | 加 webglcontextlost / webglcontextrestored 监听,自动恢复 |
这些坑里有一半,是SOLO 看到上下文之后主动提醒我的,比如纹理回退和 WebGL 恢复——我自己压根想不到。这是我最佩服它的地方:它不只是在写代码,它在帮你想产品。
最后让儿子自己加的功能 
他当场提出的、我当场丢给 SOLO 实现的,还有:
- 自己画一颗小行星(开普勒第三定律算周期)——前两周"当上帝"失败的梦,在稳定的太阳系框架里终于圆了
- 4 个探索任务:初识太阳系(访问八大行星)、伽利略卫星、土星环探秘、类地行星对比,每个带积分
- 键盘快捷键:
Space暂停、↑↓调速、M任务面板、A小行星创建器、R切自转、Esc关闭 - 移动端响应式——因为他想"把链接发给同学看"
成果展示
在线体验
Live Demo:太阳系探索器 | 3D交互式天文教育 | 何健个人网站
整站入口(其他亲子作品):https://hj1982.cn/
开源仓库(欢迎 Star)
GitCode:AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台
GitHub:GitHub - HeJian1982/solar-system: 独立的太阳系 · GitHub- 协议:MIT(保留作者署名)
[此处建议插入 4~5 张截图:首页全景 / 行星信息卡 / 小行星创建器 / 任务面板 / 手机端]
技术栈一览
| 层 | 选型 |
|---|---|
| 框架 | Next.js 14(App Router) |
| 3D | Three.js + @react-three/fiber + drei |
| UI | React 18 + TypeScript 5 + Tailwind CSS + Framer Motion |
| 数据 | NASA JPL Horizons + IAU 标准,755 行结构化 TS |
| 纹理 | Solar System Scope 2K(CC BY 4.0)+ 程序化 Canvas 回退 |
功能清单
八大行星 + 太阳,真实轨道参数- 主要卫星(月球、伽利略四卫星、土卫六/二等)
- 自定义小行星(真·开普勒第三定律)
- 4 个探索任务 + 积分系统
- 点击飞行聚焦(缓动 1.5s)
- 时间控制(暂停 / 加速 / 倒退)
- 响应式(桌面完整面板 / 手机可收起)
- 键盘快捷键全量支持
- MIT 开源
效果与总结
最让我感动的一幕:儿子"分享给老师"的那一天
做完的那个周日晚上,儿子用电脑的玩得不亦乐乎，突然说:
“爸爸,这个我能不能拿去给同学和地理老师看?”
我说当然可以。第二天放学他跑回来,第一句话不是"作业",而是:
“老师把链接发给全班了,说这比课本上的图好多了。那个最早嘟囔’图是平的’的学弟,今天下课在走廊拉着我问了好多问题。”
那一刻我作为爸爸,感觉这段时间的艰辛是值得的。
一句课间的抱怨,变成了一个能跑的网站,变成了老师发给全班的链接,又回到了那个最初嘟囔的少年手里——这就是所谓的"闭环"。而做成这个闭环的人,是一个多年没写代码的爸爸,和一个初二的儿子,还有一个叫 SOLO 的工具。
对我自己:SOLO 真正改变了什么
诚实一点写,不吹也不黑:
- 它不是替我把代码写完了——是让我一个多年没写代码的管理者,敢重新开始写。这两者是天壤之别。
- 它帮我补齐"产品思维"——纹理回退、WebGL 恢复、快捷键、响应式,这些"让作品真的能用"的东西,全是它主动建议的。
- 它把我从"老师"重新变回了"爸爸"——我不需要教儿子变量和函数。我们俩都是甲方,SOLO 是乙方。我们第一次,真真正正地,一起做成了一件事。
提效对比(诚实版)
| 维度 | 没有 SOLO 时的预估 | 实际 |
|---|---|---|
| 从 0 学 Three.js 到能写 3D | 2~3 个月业余时间(大概率放弃) | 直接跳过 |
| 八大行星 + 卫星 + 真实轨道 | 1~2 周 | 1 个周末 |
| 小行星 + 开普勒公式 | 3~5 天 | 2 小时 |
| 纹理回退 / WebGL 健壮性 | 基本不会做 | SOLO 主动加 |
| 全流程 | 约 2~3 个月(且大概率坚持不下来) | 连着 3 个周末 |
但对我来说,真正的提效不在时间上,而在"敢不敢"上——SOLO 把"这事我做不来"变成了"这事我们试试"。这是所有提效比里最难量化、也最值钱的一条。
送给同样想陪孩子做点什么的爸妈
- 让孩子来提需求,你来翻译成 Prompt。不要替他想。
- 翻车是资产。我们前两次翻车,才让第三次的 Prompt 有了"稳定"这个关键词。让孩子亲历翻车,比一次跑通更重要。
- 把"这个要发给同学玩"加到 Prompt 里——SOLO 会自动帮你考虑鲁棒性和产品细节。
- 三个周末是一个舒服的节奏:一周做主干、一周踩坑、一周打磨。别想着一个晚上搞完。
后续计划
- 加入黑洞 / 奥尔特云 / 柯伊伯带(儿子的下一个执念)
- 重启三体模式——这次用"三体近似解 + 稳定约束"的路子,让它至少转够 3 分钟
- 整理一份《陪孩子用 SOLO 做第一个 Web 项目》的极简手册
- 把这个作品做成可复用的"家庭项目模板",让零基础爸妈能一键 fork
仓库已经开源,欢迎 Star、Fork、提 Issue。被孩子和陌生人一起挑毛病的作品,才会真的长大。
致谢
- TRAE SOLO:谢谢你让一个多年没写代码的爸爸,重新敢对孩子说"好,爸爸陪你做"
- NASA JPL & Solar System Scope:开放的数据和纹理,是科普的底气
- 何零壹:最挑剔、最诚实、也最让我骄傲的产品经理
- 最早在课间嘟囔"图是平的"的那位学弟:没有你那一句话,就没有后面所有这些事
- 上一篇帖子里来问源码的朋友:是你们让我下决心单独开源
如果这篇帖子让你也想陪孩子做点什么,欢迎点赞、转发到朋友圈,或者直接去 hj1982.cn 逛一逛。
AI 时代陪孩子的意义,也许不是"教他写代码",而是"让他看见:想法真的能变成作品"。
