🔭 三日连珠 — 沉浸式天文观测平台

Syzygy Interactive Astronomical Observatory

一个基于 HTML5 Canvas 和 Three.js 的沉浸式天文观测平台，模拟三体系统中三颗恒星排成一线（朔望/Syzygy）时的壮观景象。

✨ 功能特性

🌟 沉浸式视觉体验

• Three.js 3D 星空场景 — 首页 Hero 区域采用 Three.js 构建的 3D 恒星系统，带有多层辉光和粒子效果
• 动态星空背景 — 全页面覆盖的闪烁星空背景，采用预生成算法杜绝闪烁
• 鼠标视差交互 — Hero 区域的 3D 场景会跟随鼠标移动产生微妙的 3D 视差效果
• 科幻风格 UI — 参考《星际穿越》和《精英：危险》的深色科技美学

🎬 15 秒连珠动画

• 时间轴动画 — 展示三颗恒星从分散状态逐渐排成一线的完整过程
• 轨道线与引力波纹 — 动画过程中动态显示轨道轨迹和引力波扩散效果
• 可交互进度条 — 支持鼠标点击和拖拽控制，可跳跃到任意时刻
• 阶段提示 — 实时显示当前所处阶段（分散 → 接近 → 排列 → 连珠完成）

🔭 交互式轨道模拟器

• 时间轴控制 — 拖动滑块观察不同时刻的三星位置
• 轨道拖尾效果 — 恒星移动时留下发光轨迹，直观展示运动路径
• 点击查看详情 — 点击任意恒星弹出详细信息卡片（光谱类型、质量、温度等）
• 连珠状态监测 — 实时显示角偏差、轨道相位和引力潮汐强度
• 动态对齐粒子 — 当三星夹角小于 30° 时，显示流动的粒子动画效果
• 速度控制 — 可调节模拟播放速度

📊 科学数据展示

• 真实天文数据表 — 包含半人马座 α、Kepler-16、HD 188753 等真实三合星系统的观测数据
• 科学原理解释 — 以教师口吻解释朔望概念、三体轨道力学、罕见原因等
• 观测指南 — 提供最佳观测时间、设备建议和光污染规避建议

🚀 技术栈

技术	用途
HTML5 Canvas	2D 动画渲染（星空、动画、模拟器）
Three.js r128	Hero 区域 3D 场景渲染
CSS3	动画、渐变、自定义滚动条、响应式布局
Vanilla JavaScript	全部交互逻辑，无框架依赖
Google Fonts	Noto Sans SC, Orbitron, JetBrains Mono

📦 快速开始

方式一：直接打开

# 克隆仓库
git clone https://github.com/donglovejava/syzygy-observatory.git
cd syzygy-observatory

# 直接在浏览器中打开
open 三日连珠.html

方式二：本地服务器

# 使用 Python 启动本地服务器
python3 -m http.server 8080

# 访问 http://localhost:8080

方式三：Live Server (VS Code)

1. 安装 Live Server 扩展
2. 右键点击 三日连珠.html
3. 选择 "Open with Live Server"

📁 项目结构

syzygy-observatory/
├── 三日连珠.html    # 主页面（单文件，包含所有 CSS/JS）
└── README.md         # 项目文档

🎯 页面结构

区块	内容
Hero	3D 恒星场景 + 标题 + Concise Mode 数据摘要
科学原理	4 张差异化卡片解释朔望概念
观测数据	真实天文数据表格 + Kepler-16 科学背景
动画演示	15 秒连珠动画 + 可拖拽进度条
交互模拟	可交互的三体轨道模拟器
观测指南	3 条实用观测建议

📱 兼容性

• ✅ Chrome 88+
• ✅ Firefox 85+
• ✅ Safari 14+
• ✅ Edge 88+

需要浏览器支持 Canvas 2D API 和 WebGL。Three.js 用于 Hero 区域的 3D 渲染，所有现代浏览器均支持。

📄 许可证

本项目采用 MIT 开源协议。

🔗 数据来源

• NASA Exoplanet Archive
• ESA Gaia DR3
• Kepler Mission

🙏 致谢

本项目灵感来源于刘慈欣的科幻小说《三体》以及真实的天文物理学研究。

---

🌌 仰望星空，探索宇宙的奥秘