在线体验： 12 星座黄道面 3D 动画系统

你是否好奇过：为什么星座和生日有关？地球公转与黄道面到底是什么关系？太阳在一年中是如何”穿过”十二星座的？

这个项目用 交互式 3D 动画 的方式，把地球公转、黄道面和十二星座的空间关系直观地呈现出来。你可以从多个角度观察，控制时间流速，点击星座查看详情，甚至跳转到春分、夏至等关键天文节点。

目录

1. 项目概述

12 星座黄道面 3D 动画系统（Zodiac Ecliptic 3D）是一个基于 Web 的天文教学演示工具。它使用 Three.js 构建 3D 场景，通过精确的轨道力学计算，实时展示：

  • 地球围绕太阳的椭圆公转轨道
  • 黄道面（地球公转轨道平面）的空间位置
  • 太阳视位置与十二星座黄经范围的对应关系
  • 关键天文节点（春分、夏至、秋分、冬至、近日点、远日点）

整个系统采用原生 DOM + TypeScript 构建，无需重型前端框架，轻量且性能优秀。

2. 核心功能

2.1 多种观察视角

视角 说明
俯视 从黄道面正上方俯瞰整个太阳系
地球视角 从地球表面观察太阳和星空
太阳视角 从太阳中心观察地球公转
自由视角 鼠标拖拽控制任意观察角度

2.2 时间控制系统

  • 播放/暂停：空格键切换，观察地球实时公转
  • 速度调节：1x 到 10,000x 多档速度，快速浏览全年变化
  • 时间滑块：拖拽滑块精确定位到任意日期
  • 年份切换：±1 年快速跳转
  • 节气按钮：一键跳转到春分、夏至、秋分、冬至、近日点、远日点
  • 回到今天：快速定位到当前真实日期

2.3 星座详情探索

点击或双击场景中的星座区域，会弹出详情面板：

  • 星座符号与拉丁名
  • 黄经范围（如 0°–30°）
  • 日期范围（占星学日期）
  • 代表亮星（如白羊座的娄宿三）
  • 希腊神话故事简介
  • 岁差说明（占星学日期与实际天文日期的差异）

2.4 可视化选项

在设置面板中可以自由开关：

  • 地球公转轨道
  • 黄道面平面
  • 参考网格
  • 星座标签
  • 星座星图（主星连线示意）
  • 地球渲染模式（纹理/纯色/线框）
  • 背景模式（星空/纯黑）
  • 性能模式（针对移动设备优化）

2.5 实时状态显示

底部面板实时显示：

  • 模拟日期
  • 太阳黄经
  • 当前星座
  • 日地距离（AU）
  • 太阳角速度
  • 真近点角
  • 黄赤交角
  • 年内已过天数
  • 时间流速

3. 操作指南

桌面端

操作 说明
左键拖拽 旋转视角（自由模式）
右键拖拽 平移场景
滚轮 缩放
双击星座 聚焦并查看详情
空格 播放/暂停
1-4 切换视角
← → 增减年份

移动端

  • 单指拖拽：旋转视角
  • 双指捏合：缩放
  • 点击星座：显示详情面板（面板内提供”聚焦视角”按钮）

4. 技术实现

技术 用途
Three.js 3D 渲染引擎
TypeScript 类型安全的代码
Vite 构建工具
原生 DOM UI 界面（无重型框架依赖）
开普勒轨道力学 精确计算地球位置和太阳黄经

轨道计算

系统使用标准开普勒方程计算地球在椭圆轨道上的位置：

  • 轨道偏心率：约 0.0167
  • 轨道半长轴：1 AU
  • 黄赤交角：23.44°
  • 考虑近日点进动

性能优化

  • 3D 场景使用适量多边形，兼顾视觉效果和性能
  • UI 文本更新限制在 10Hz，避免每帧重排
  • 移动端自动检测并建议开启性能模式
  • WebGL 不可用时优雅降级为提示页面

5. 星座数据

系统包含完整的 12 星座数据：

星座 符号 黄经范围 日期范围 代表亮星
白羊座 ♈ 0°–30° 3/21–4/19 娄宿三 (Hamal)
金牛座 ♉ 30°–60° 4/20–5/20 毕宿五 (Aldebaran)
双子座 ♊ 60°–90° 5/21–6/21 北河三 (Pollux)
巨蟹座 ♋ 90°–120° 6/22–7/22 柳宿增十 (Tarf)
狮子座 ♌ 120°–150° 7/23–8/22 轩辕十四 (Regulus)
处女座 ♍ 150°–180° 8/23–9/22 角宿一 (Spica)
天秤座 ♎ 180°–210° 9/23–10/23 氐宿一 (Zubenelgenubi)
天蝎座 ♏ 210°–240° 10/24–11/22 心宿二 (Antares)
射手座 ♐ 240°–270° 11/23–12/21 箕宿三 (Kaus Australis)
摩羯座 ♑ 270°–300° 12/22–1/19 垒壁阵四 (Deneb Algedi)
水瓶座 ♒ 300°–330° 1/20–2/18 虚宿一 (Sadalsuud)
双鱼座 ♓ 330°–360° 2/19–3/20 右更二 (Alrescha)

注意：本系统采用占星学坐标系（以春分点为 0° 固定）。由于地球自转轴岁差（周期约 25,772 年），实际天象中太阳进入各星座的日期已偏移约 24–30 天。以上为占星学日期，非实际天文日期。

6. 在线体验

👉 点击这里打开 12 星座黄道面 3D 动画系统

支持桌面端和移动端浏览器访问。推荐使用 Chrome、Firefox、Safari 等现代浏览器，需要 WebGL 支持。

项目源码：TypeScript + Three.js + Vite