371 lines
17 KiB
Markdown
371 lines
17 KiB
Markdown
## 项目概述
|
||
专注于**深空探测器**（如旅行者号、火星探测器等），那么整个系统的实现逻辑会变得更加清晰和纯粹。你不再需要处理近地轨道的 TLE 数据，而是完全进入了**天体力学**的领域。
|
||
|
||
实现这个系统的核心只有一条路：**NASA JPL Horizons 系统**。
|
||
|
||
这是全人类最权威的太阳系天体位置数据库。以下是针对深空探测器系统的具体实现方案：
|
||
|
||
### 一、 核心数据源：NASA JPL Horizons
|
||
|
||
对于深空探测器，你不能用 GPS 坐标，甚至不能单纯用经纬度。你需要的是在**太阳系中的三维坐标**。
|
||
|
||
* **数据提供方：** NASA 喷气推进实验室 (JPL)。
|
||
* **覆盖范围：** 所有的行星、卫星、以及几乎所有人类发射的深空探测器（Voyager, Juno, New Horizons 等）。
|
||
* **唯一标识 (ID)：** 每个探测器都有一个唯一的 ID。
|
||
* 旅行者 1 号 (Voyager 1): `-31`
|
||
* 旅行者 2 号 (Voyager 2): `-32`
|
||
* 新视野号 (New Horizons): `-98`
|
||
* 帕克太阳探测器 (Parker Solar Probe): `-96`
|
||
* *注：人造探测器的 ID 通常是负数。*
|
||
|
||
-----
|
||
|
||
### 二、 获取数据的方式 (推荐技术方案)
|
||
|
||
为了获取这些数据，你不需要去解析复杂的文本文件，最简单、最现代的方式是使用 **Python** 的 **`astroquery`** 库。它是一个专门用来查询天文数据库的工具，内置了对 JPL Horizons 的支持。
|
||
|
||
#### 1\. 安装工具
|
||
|
||
```bash
|
||
pip install astroquery
|
||
```
|
||
|
||
#### 2\. 代码实现逻辑
|
||
|
||
你需要向系统询问：“在**这个时间**，相对于**太阳**，**旅行者1号**在哪里？”
|
||
|
||
以下是一个完整的 Python 脚本示例，它会获取旅行者 1 号和地球的坐标，以便你计算它们之间的距离或画图：
|
||
|
||
```python
|
||
from astroquery.jplhorizons import Horizons
|
||
from astropy.time import Time
|
||
|
||
# 1. 设定查询参数
|
||
# id: 目标天体 ID (Voyager 1 = -31)
|
||
# location: 坐标原点 (@sun 表示以太阳为中心，@0 表示以太阳系质心为中心)
|
||
# epochs: 时间点 (当前时间)
|
||
obj = Horizons(id='-31', location='@sun', epochs=Time.now().jd)
|
||
|
||
# 2. 获取向量数据 (Vectors)
|
||
# 这一步会向 NASA 服务器发送请求
|
||
vectors = obj.vectors()
|
||
|
||
# 3. 提取坐标 (x, y, z)
|
||
# 默认单位是 AU (天文单位，1 AU ≈ 1.5亿公里)
|
||
x = vectors['x'][0]
|
||
y = vectors['y'][0]
|
||
z = vectors['z'][0]
|
||
|
||
print(f"旅行者1号 (Voyager 1) 相对于太阳的坐标 (AU):")
|
||
print(f"X: {x}\nY: {y}\nZ: {z}")
|
||
|
||
# --- 同时获取地球的位置，用于画出相对位置 ---
|
||
earth = Horizons(id='399', location='@sun', epochs=Time.now().jd).vectors()
|
||
print(f"\n地球 (Earth) 坐标 (AU):")
|
||
print(f"X: {earth['x'][0]}, Y: {earth['y'][0]}, Z: {earth['z'][0]}")
|
||
```
|
||
|
||
-----
|
||
|
||
### 三、 关键技术点解析
|
||
|
||
在开发这个系统时，有三个关键概念你必须处理好，才能正确显示“探测器在比着重的位置”以及“旁边的星球”。
|
||
|
||
#### 1\. 坐标系的选择：日心坐标 (Heliocentric)
|
||
|
||
* **近地卫星**用的是“地心坐标”（以地球为原点）。
|
||
* **深空探测器**必须用**日心坐标**（以太阳为原点）。
|
||
* 在查询数据时，务必指定 `location='@sun'`。这样返回的 `(0,0,0)` 就是太阳，所有行星和探测器都围绕它分布。
|
||
|
||
#### 2\. 单位的量级：天文单位 (AU)
|
||
|
||
* 深空的空间太大了。如果你用“米”或“公里”做单位，数字会大到让 JavaScript 崩溃或精度丢失。
|
||
* **解决方案：** 使用 **AU (Astronomical Unit)**。
|
||
* 地球到太阳的距离 ≈ 1.0 AU。
|
||
* 旅行者 1 号目前距离太阳 ≈ 160+ AU。
|
||
* 使用 AU 作为你 3D 场景的基础单位，显示时再换算成公里给用户看。
|
||
|
||
#### 3\. 如何确定“旁边的星球”
|
||
|
||
因为所有坐标都是统一在“日心坐标系”下的，判断“旁边”非常简单：计算欧几里得距离。
|
||
$$Distance = \sqrt{(x_1-x_2)^2 + (y_1-y_2)^2 + (z_1-z_2)^2}$$
|
||
|
||
* 比如，你要显示“朱诺号 (Juno)”旁边的星球。
|
||
* 你获取 Juno 的坐标 $(x_j, y_j, z_j)$。
|
||
* 你获取木星 (Jupiter) 的坐标 $(x_p, y_p, z_p)$。
|
||
* 一算距离，你会发现它们非常近，而它离地球非常远。
|
||
|
||
### 四、 总结系统架构建议
|
||
|
||
如果你想做一个网页端展示系统：
|
||
|
||
1. **后端 (Python API):**
|
||
|
||
* 使用 `astroquery`。
|
||
* 建立一个 ID 列表（包含八大行星 + 知名探测器）。
|
||
* 每隔一段时间（比如每天或用户请求时）去 NASA JPL 拉取一次最新的坐标数据（因为深空探测器飞得很慢，不需要每秒更新）。
|
||
* 将这些 `(x, y, z)` 坐标打包成 JSON 发给前端。
|
||
|
||
2. **前端 (Visualization):**
|
||
|
||
* 建立一个 3D 场景，原点 `(0,0,0)` 放一个发光的球（太阳）。
|
||
* 根据后端返回的 AU 坐标放置行星和探测器。
|
||
* **关键功能：** 添加“轨道线”。为了让用户看懂探测器的轨迹，你不仅要获取“当前”位置，最好获取“过去一年”到“未来一年”的一系列点，连成线，这样用户就能直观地看到它是怎么飞掠木星然后飞向深空的。
|
||
|
||
这是一个非常棒的进阶问题！要在一个网页上“形象且准确”地展示深空探测器和行星，你不仅要解决**数据**问题，还要解决\*\*3D 图形学中的尺度（Scale）\*\*问题。因为宇宙太空中，“大”和“远”的跨度大到人类难以直观理解。
|
||
|
||
以下是实现这一目标的详细方案，包括数据细节、3D 模型资源和可视化技巧：
|
||
|
||
### 一、 数据篇：关键探测器 ID 与 轨道线绘制
|
||
|
||
首先，你需要向 JPL Horizons 系统请求正确的目标 ID，并获取一段**时间序列**的数据来画出轨道线。
|
||
|
||
#### 1\. 常用深空探测器 ID 列表 (JPL Horizons)
|
||
|
||
这些是人类历史上最重要的深空探测器，建议收入你的系统：
|
||
|
||
| 探测器名称 | 英文名 | ID (JPL) | 备注 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| **旅行者 1 号** | Voyager 1 | `-31` | 离地球最远的人造物体，已进入星际空间 |
|
||
| **旅行者 2 号** | Voyager 2 | `-32` | 唯一造访过天王星和海王星的探测器 |
|
||
| **新视野号** | New Horizons | `-98` | 飞掠冥王星，正处于柯伊伯带 |
|
||
| **帕克太阳探测器** | Parker Solar Probe | `-96` | 正在“触摸”太阳，速度最快 |
|
||
| **朱诺号** | Juno | `-61` | 正在木星轨道运行 |
|
||
| **卡西尼号** | Cassini | `-82` | 土星探测器（已撞击销毁，需查询历史时间） |
|
||
| **毅力号** | Perseverance | `-168` | 火星车（位置与火星几乎重叠，但在前往火星途中可查） |
|
||
|
||
#### 2\. 如何绘制“轨道线”
|
||
|
||
只显示一个点是不够的，你需要画出它“从哪里来，到哪里去”。
|
||
|
||
* **后端逻辑：** 当你查询 API 时，不要只查询 `Time.now()`。
|
||
* **查询策略：** 查询一个时间段。例如，查询从 `2020-01-01` 到 `2025-01-01`，步长为 `1天`。
|
||
* **数据结构：** 你会得到一个包含 1800 个 $(x, y, z)$ 坐标的数组。
|
||
* **前端绘制：** 将这些点连接成一条平滑的线（在 Three.js 中使用 `LineLoop` 或 `CatmullRomCurve3`），用户就能看到探测器优美的弧形轨道。
|
||
|
||
-----
|
||
|
||
### 二、 视觉篇：如何显示外形 (3D 模型与纹理)
|
||
|
||
要在网页上显示逼真的外形，你需要使用 **WebGL** 技术。目前业界标准是 **Three.js**。
|
||
|
||
#### 1\. 获取高精度的探测器模型 (3D Models)
|
||
|
||
你不需要自己建模！NASA 官方免费提供了极高质量的 3D 模型，格式通常是 `.glb` 或 `.gltf`（这是 3D 网页开发的 JPG，体积小、加载快）。
|
||
|
||
* **NASA 3D Resources:** 这是你的宝库。
|
||
* *网址:* `https://nasa3d.arc.nasa.gov/models`
|
||
* 你可以下载到 Voyager, Cassini, Hubble 等所有知名探测器的官方模型。
|
||
* **加载方法：** 使用 Three.js 的 `GLTFLoader`。
|
||
```javascript
|
||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||
|
||
const loader = new GLTFLoader();
|
||
loader.load( 'path/to/voyager.glb', function ( gltf ) {
|
||
const voyagerModel = gltf.scene;
|
||
scene.add( voyagerModel );
|
||
});
|
||
```
|
||
|
||
#### 2\. 获取行星的逼真纹理 (Textures)
|
||
|
||
行星是一个球体（SphereGeometry），你需要给它贴上高清的“皮肤”。
|
||
|
||
* **资源来源：** **Solar System Scope** 或 **NASA Scientific Visualization Studio**。
|
||
* **你需要三种贴图来达到“准确且形象”：**
|
||
1. **Diffuse Map (漫反射贴图):** 行星原本的颜色（如地球的蓝白、火星的红色）。
|
||
2. **Normal Map / Bump Map (法线/凹凸贴图):** 让山脉和陨石坑看起来有立体感，而不是光滑的皮球。
|
||
3. **Specular Map (高光贴图):** 只有海洋反光，陆地不反光（这对地球特别重要）。
|
||
|
||
-----
|
||
|
||
### 三、 核心难点：大小与距离的冲突 (The Scale Problem)
|
||
|
||
这是你在这个项目中最需要处理的**交互设计难点**。
|
||
|
||
**现实情况是：** 太阳系极其空旷。如果你按真实比例（1:1）显示：
|
||
|
||
* 如果屏幕上可以看到地球和火星的距离，那么地球本身小到连一个像素都不到（看不见）。
|
||
* 如果你把地球放大到能看见，那么火星在几公里以外的屏幕外。
|
||
|
||
**解决方案：动态尺度缩放 (Dynamic Scaling / Billboard Mode)**
|
||
|
||
你不能始终使用真实大小，你需要欺骗眼睛：
|
||
|
||
1. **真实模式 (Real Scale):** 用于计算物理位置和轨道。这是后台运行的数学逻辑。
|
||
2. **展示模式 (Iconic Scale):** 用于渲染。
|
||
* **远景视角时：** 将所有行星和探测器放大 **1000倍 到 10000倍**。这样用户在看整个太阳系时，能看到一个个清晰的小球或图标。
|
||
* **近景视角时（当摄像机靠近物体）：** 逐渐将放大倍数缩小回 **1倍**。
|
||
* **具体实现：** 在每一帧渲染循环（Render Loop）中，根据摄像机到物体的距离 $D$，动态计算物体的缩放系数 $S$。
|
||
$$S = \max(1, \frac{D}{k})$$
|
||
*(其中 $k$ 是一个常数因子)*
|
||
|
||
**关于探测器的特殊处理：**
|
||
探测器比行星更小（几米 vs 几千公里）。在宏观视角下，绝对不能按比例渲染探测器模型，否则永远看不见。
|
||
|
||
* **策略：** 在远景时，不要渲染 3D 模型，而是渲染一个**发光的图标（Sprite）或者文字标签**。
|
||
* **交互：** 只有当用户点击“旅行者1号”标签，摄像机自动飞过去并拉近距离后，才淡出图标，加载并显示精细的 3D 模型。
|
||
|
||
### 四、 总结：推荐的开发路线
|
||
|
||
如果你现在开始动手，我建议按照这个层级构建：
|
||
|
||
1. **Level 1 (原型):**
|
||
|
||
* 使用 **Three.js**。
|
||
* 中间放一个红球（太阳），周围放一个蓝球（地球）。
|
||
* 使用静态数据（手动写死坐标）确位置。
|
||
|
||
2. **Level 2 (接入数据):**
|
||
|
||
* 后端写好 Python 脚本，拉取 JPL 数据。
|
||
* 前端根据数据更新球体的位置。
|
||
|
||
3. **Level 3 (视觉升级):**
|
||
|
||
* 给球体贴上 NASA 的纹理。
|
||
* 去 NASA 3D 网站下载 Voyager 的 `.glb` 模型，替换掉代表探测器的小方块。
|
||
* 加上“星空背景盒子 (Skybox)”，让背景是真实的银河系星图，而不是全黑。
|
||
|
||
4. **Level 4 (交互完善):**
|
||
|
||
* 实现**轨道控制器 (OrbitControls)**，允许用户旋转、缩放视角。
|
||
* 实现**点击聚焦**：点击列表里的“火星”，视角平滑飞向火星。
|
||
|
||
太棒了！这两个功能是让你的太阳系可视化项目从“能用”走向“惊艳”的关键一步。
|
||
|
||
下面我将分别提供这两个核心功能的 Three.js 代码片段。你可以把它们集成到你的 Three.js 初始化和渲染循环中。
|
||
|
||
-----
|
||
|
||
### 一、 Three.js 加载行星纹理 (让星球看起来真实)
|
||
|
||
这段代码展示了如何创建一个带有漫反射贴图（颜色）、高光贴图（反光）和法线贴图（凹凸感）的逼真地球。
|
||
|
||
**前置要求：** 你需要准备好 `earth_diffuse.jpg`, `earth_specular.jpg`, `earth_normal.jpg` 这三张图片放在你的项目文件夹中。
|
||
|
||
```javascript
|
||
import * as THREE from 'three';
|
||
|
||
// 1. 初始化纹理加载器
|
||
const textureLoader = new THREE.TextureLoader();
|
||
|
||
// 2. 定义创建行星的函数
|
||
function createRealisticPlanet() {
|
||
// --- 几何体 (Geometry) ---
|
||
// 创建一个球体。参数：半径, 水平分段数, 垂直分段数
|
||
// 分段数越高，球体越圆滑，但性能开销越大。64是比较好的平衡点。
|
||
const geometry = new THREE.SphereGeometry(1, 64, 64);
|
||
|
||
// --- 材质 (Material) ---
|
||
// 使用 MeshPhongMaterial，这是一种支持高光反射的材质，适合表现行星表面。
|
||
const material = new THREE.MeshPhongMaterial({
|
||
// a. 漫反射贴图 (Diffuse Map) - 决定星球表面的基本颜色和图案
|
||
map: textureLoader.load('textures/earth_diffuse.jpg'),
|
||
|
||
// b. 高光贴图 (Specular Map) - 决定哪些区域反光（海洋），哪些不反光（陆地）
|
||
// 通常是黑白图片，白色反光强，黑色不反光。
|
||
specularMap: textureLoader.load('textures/earth_specular.jpg'),
|
||
specular: new THREE.Color('grey'), // 高光的颜色
|
||
shininess: 10, // 高光的亮度指数
|
||
|
||
// c. 法线贴图 (Normal Map) - 模拟表面的凹凸细节（山脉、海沟），不改变实际几何体
|
||
normalMap: textureLoader.load('textures/earth_normal.jpg'),
|
||
normalScale: new THREE.Vector2(1, 1) // 凹凸感的强度
|
||
});
|
||
|
||
// --- 网格 (Mesh) ---
|
||
// 将几何体和材质组合成一个可渲染的对象
|
||
const earthMesh = new THREE.Mesh(geometry, material);
|
||
|
||
// 稍微倾斜一点，模拟地轴倾角
|
||
earthMesh.rotation.z = THREE.MathUtils.degToRad(23.5);
|
||
|
||
return earthMesh;
|
||
}
|
||
|
||
// 3. 将地球加入场景
|
||
const scene = new THREE.Scene();
|
||
// ... 添加灯光 (必须有光才能看到 Phong 材质的效果) ...
|
||
const sunLight = new THREE.PointLight(0xffffff, 1.5);
|
||
scene.add(sunLight);
|
||
|
||
const earth = createRealisticPlanet();
|
||
scene.add(earth);
|
||
|
||
// 在你的动画循环中让它自转
|
||
function animate() {
|
||
requestAnimationFrame(animate);
|
||
earth.rotation.y += 0.001; // 每一帧旋转一点点
|
||
// renderer.render(...)
|
||
}
|
||
animate();
|
||
```
|
||
|
||
-----
|
||
|
||
### 二、 处理动态缩放 (The Scale Problem)
|
||
|
||
这段代码解决的是“距离太远看不见”的问题。它的核心思想是：**在每一帧渲染前，检查摄像机离物体有多远，然后调整物体的大小，确保它在屏幕上至少占据一定的大小。**
|
||
|
||
你需要把这段逻辑放在你的 `animate()` 或 `render()` 循环中。
|
||
|
||
```javascript
|
||
import * as THREE from 'three';
|
||
|
||
// 假设你已经有了场景、摄像机和一些物体
|
||
// scene, camera, renderer 已初始化
|
||
// 假设你有一个数组存放所有的探测器对象 (Mesh 或 Sprite)
|
||
const probes = [voyager1Mesh, parkerSolarProbeSprite, ...];
|
||
|
||
// 定义一个基础缩放因子，决定物体在远看时保持多大
|
||
// 这个值需要根据你的实际场景单位进行调整测试
|
||
const MIN_VISIBLE_SCALE = 0.05;
|
||
|
||
// --- 这个函数放在你的 animate() 循环中 ---
|
||
function updateObjectScales() {
|
||
probes.forEach(probe => {
|
||
// 1. 计算物体到摄像机的距离
|
||
const distance = camera.position.distanceTo(probe.position);
|
||
|
||
// 2. 计算目标缩放比例
|
||
// 逻辑：距离越远，需要的缩放比例就越大。
|
||
// 我们设置一个下限为 1 (保持原始大小)，上限根据距离动态增加。
|
||
// distance * MIN_VISIBLE_SCALE 是一个经验公式，你可以根据需要修改。
|
||
let targetScale = Math.max(1, distance * MIN_VISIBLE_SCALE);
|
||
|
||
// 【可选优化】：如果物体是 Sprite（图标），我们通常希望它大小固定，不随距离变化
|
||
// 如果是 3D 模型，我们希望它远看大，近看恢复真实大小。
|
||
if (probe.isSprite) {
|
||
// 对于图标，我们可以让它始终保持相对于屏幕的固定大小
|
||
// 这种计算稍微复杂一点，需要考虑相机的视场角 (FOV)
|
||
const scaleFactor = distance / camera.fov; // 简化版计算
|
||
probe.scale.set(scaleFactor, scaleFactor, scaleFactor);
|
||
} else {
|
||
// 对于 3D 模型，应用动态缩放
|
||
probe.scale.set(targetScale, targetScale, targetScale);
|
||
}
|
||
});
|
||
}
|
||
|
||
// --- 你的主循环 ---
|
||
function animate() {
|
||
requestAnimationFrame(animate);
|
||
|
||
// 1. 更新控制器 (如果用了 OrbitControls)
|
||
// controls.update();
|
||
|
||
// 2. 【核心】更新物体的动态缩放
|
||
updateObjectScales();
|
||
|
||
// 3. 渲染场景
|
||
renderer.render(scene, camera);
|
||
}
|
||
animate();
|
||
```
|
||
|
||
### 建议
|
||
|
||
对于初学者，我强烈建议先从**纹理贴图**开始。把一个灰色的球体变成一个逼真的地球，会给你带来巨大的成就感。
|
||
|
||
动态缩放稍微复杂一些，涉及到对 3D 空间距离感的调试。你可以先把所有的物体都按 1000 倍的固定比例放大，等整个流程跑通了，再加入动态缩放的逻辑来提升体验。 |