天问 · 月球探测任务仿真平台
Tianwen — Lunar Exploration Mission Simulation Platform
「遂古之初，谁传道之？」
——从近地轨道到月球背面，一次跨越 38 万公里的数字远征
一、项目概述
天问 是一个面向航天科普与任务规划的三维实时仿真平台，完整复现了月球探测任务的五大阶段——发射入轨、地月转移、绕月飞行、返程转移、再入返回。系统在浏览器端以真实比例渲染地球-月球空间场景，实时计算航天器轨道动力学参数，并提供多视角自由观测能力。
本项目旨在探索 Web 端深空环境可视化 的技术边界，证明现代浏览器已具备承载行星级三维仿真任务的能力。
二、核心特性
全任务链仿真
| 阶段 | 描述 | 速度范围 |
|---|---|---|
 发射 |
近地轨道爬升至转移轨道高度 | 0 → 11.2 km/s |
 地月转移 |
霍曼转移轨道，跨越 38.4 万公里 | 10.5 → 10.9 km/s |
 绕月飞行 |
500km 高度环月轨道运行 | 1.0 → 1.6 km/s |
 返程转移 |
反向转移轨道返回地球引力范围 | 10.5 → 10.9 km/s |
 返回地球 |
再入下降，任务完成 | 3.0 → 11.2 km/s |
多视角自由观测系统
- 全局视角 — 一览地月全貌，纵览 38 万公里的空间尺度
- 地球视角 — 从深空回望蓝色星球
- 月球视角 — 近距离审视环形山与月海
- 跟随视角 — 以航天器为中心，实时跟随，鼠标自由旋转、缩放
所有视角均基于 camera.lookAt 锚点机制实现，支持鼠标拖拽自由旋转，提供无死角的空间观测体验。
实时遥测面板
┌─────────────────────────────────────┐
│ 任务阶段 地月转移 │
│ 任务进度 47% │
│ 飞行速度 10.7 km/s │
│ 距地球 18.2 万 km │
│ 距月球 20.1 万 km │
│ 飞行时间 00:01:12 │
│ ████████████░░░░░░░░ 47% │
└─────────────────────────────────────┘
仿真速度控制
支持 1x / 2x / 5x / 10x 四档速度调节，在 50 秒内完成全部任务流程的加速回放。
三、技术架构
┌──────────────────────────────────────────────────────────────┐
│ 前端渲染层 │
│ ┌────────────┐ ┌──────────────┐ ┌───────────────────────┐ │
│ │ Vue 3 │ │ CesiumJS │ │ CSS Animations │ │
│ │ Composition│ │ 3D Engine │ │ Panel Transitions │ │
│ │ API │ │ scene3DOnly │ │ Pulse & Glow │ │
│ └─────┬──────┘ └──────┬───────┘ └───────────┬───────────┘ │
│ │ │ │ │
│ ┌─────┴────────────────┴──────────────────────┴───────────┐ │
│ │ 响应式状态管理 │ │
│ │ reactive / ref / computed / shallowRef │ │
│ └────────────────────────┬────────────────────────────────┘ │
│ │ │
│ ┌────────────────────────┴────────────────────────────────┐ │
│ │ 仿真引擎核心 │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │ │
│ │ │ 轨道计算 │ │ 时间管理 │ │ 相机控制 │ │ 实体管理│ │ │
│ │ │ posPhase │ │ perf.now │ │ lookAt │ │ Entity │ │ │
│ │ │ posTime │ │ pause/ │ │ Heading │ │ API │ │ │
│ │ │ │ │ resume │ │ Pitch │ │ │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
关键技术决策
| 决策 | 方案 | 原因 |
|---|---|---|
| 3D 渲染模式 | scene3DOnly: true |
禁用 2D/Columbus 投影管线，避免地心坐标 (0,0,0) 的 projectTo2D 奇点崩溃 |
| 坐标系 | 全局偏移 O = 1e8 |
所有实体坐标远离 WGS84 地心原点，消除浮点精度问题 |
| 相机控制 | camera.lookAt + HeadingPitchRange |
替代 flyTo/setView，实现目标居中 + 鼠标自由旋转的交互范式 |
| 状态管理 | Vue 3 Composition API | shallowRef 管理 Cesium 实体避免深层代理开销，reactive 管理位置坐标 |
| 动画驱动 | requestAnimationFrame + performance.now |
纯 JS 时间驱动，不依赖 Cesium Clock，精度可控 |
| 轨迹渲染 | CallbackProperty 动态 polyline |
逐帧更新顶点数组，避免反复创建/销毁实体 |
四、视觉设计
设计语言
- 色彩体系：深空黑底
#050510+ 赛博青#00E5FF主色调，营造沉浸式太空氛围 - 面板风格：毛玻璃半透明
backdrop-filter: blur(14px)，边缘辉光描边 - 动效设计：航天器脉冲呼吸、进度条光晕、面板滑入、完成弹窗缩放
- 信息层级：遥测数据 → 进度条 → 控制按钮 → 时间线 → 视角切换，自上而下渐进展开
色彩变量
--bg-deep: #050510 /* 深空背景 */
--accent: #00E5FF /* 赛博青 — 主强调色 */
--accent-dim: #00838F /* 暗青 — 按钮渐变起点 */
--text-main: #d0d8e8 /* 主文字 */
--text-muted: #5a6e88 /* 辅助文字 */
--glass-bg: rgba(6, 10, 26, 0.92) /* 毛玻璃面板 */
--glass-border: rgba(0, 200, 255, 0.18) /* 辉光边框 */
五、快速启动
环境要求
- Node.js >= 18
- 包管理器：pnpm（推荐）/ npm / yarn
安装与运行
# 克隆项目
git clone https://github.com/your-username/tianwen-lunar-sim.git
cd tianwen-lunar-sim
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
项目结构
tianwen-lunar-sim/
├── src/
│ ├── App.vue # 根组件
│ ├── components/
│ │ └── SpaceSimulation.vue # 仿真主组件（核心逻辑）
│ ├── main.js # 入口文件
│ └── style.css # 全局样式
├── public/
├── index.html
├── vite.config.js
└── package.json
六、使用指南
① 打开页面 → 自动进入全局视角，可见地球与月球
② 点击 [▶ 开始任务] → 火箭发射，实时遥测数据开始更新
③ 使用视角控制面板切换观察角度
→ 拖拽鼠标可自由旋转
→ 滚轮可缩放远近
④ 点击速度倍率 [2x] [5x] [10x] 加速回放
⑤ 任务完成后弹出祝贺弹窗，点击 [重新开始] 重置
七、技术亮点深度解析
7.1 奇点规避：为什么不能把地球放在 (0,0,0)？
Cesium 内部基于 WGS84 椭球体进行坐标变换。当几何体中心恰好位于地心 (0,0,0) 时，GeometryPipeline.projectTo2D 会尝试将三维网格顶点投影到 2D 墨卡托空间，而地心点在投影变换中是数学奇点——这会导致渲染管线直接崩溃。
解决方案：引入全局偏移量 O = 1e8（10 万公里），将整个场景平移到远离地心的位置，所有实体坐标统一加偏移，既规避了奇点，又不影响相对距离的计算精度。
7.2 自由旋转：从 setView 到 lookAt 的范式转换
传统的 camera.setView({ orientation: { heading, pitch, roll } }) 将相机钉死在固定位置，用户无法通过鼠标交互旋转。而 camera.lookAt(target, HeadingPitchRange) 建立了一个旋转锚点：
用户鼠标拖拽
↓
┌─────────────────────┐
│ camera.position │ ← 绕锚点做球面运动
│ ↕ │
│ HeadingPitchRange │ ← heading: 水平角
│ ↕ │ pitch: 俯仰角
│ lookAt target │ ← 航天器 / 地球 / 月球
└─────────────────────┘
跟随模式下，每帧仅更新锚点位置（读取用户当前的 heading/pitch），保持用户手动旋转的角度不被重置。
7.3 时间管理：双时钟解耦
仿真时间与 Cesium 渲染时钟完全解耦，使用独立的 performance.now() 时间轴：
performance.now() → raw elapsed
↓
× speedMul (1x / 2x / 5x / 10x)
↓
- pausedTotal (累计暂停时长)
↓
sim time t ∈ [0, TOTAL_DUR]
↓
posAtTime(t) → { x, y, z, phaseIdx, phaseT }
这使得暂停/恢复/变速完全无损，且不干扰 Cesium 内部的渲染循环。
八、未来规划
| 阶段 | 特性 | 说明 |
|---|---|---|
| P0 | 纹理贴图 | 为地球和月球加载真实纹理（Blue Marble / LROC） |
| P0 | 火箭模型 | 引入 3D 火箭模型替代点状标识 |
| P1 | 多任务支持 | 嫦娥系列 / 阿波罗系列 / 自定义任务参数 |
| P1 | 数据导出 | 导出飞行轨迹 CSV / 遥测报告 PDF |
| P2 | 天体物理 | 引力辅助轨道计算、拉格朗日点可视化 |
| P2 | 协同模式 | WebSocket 多人协同观测 |
| P3 | VR 支持 | WebXR 接入，沉浸式太空漫步体验 |
九、致谢
「九天之际，安放安属？」
两千年前屈原的天问，今日由代码作答。
天问 · 月球探测任务仿真平台
用浏览器丈量星辰大海