threejs模拟太阳系

基于 Three.js 构建的交互式太阳系3D可视化页面，支持多语言、丰富的交互功能和视觉效果。

太阳系页面 (Solar System)

目录结构

src/
├── views/
│   └── SolarSystem.vue          # 主页面组件
├── components/SolarSystem/
│   ├── SolarSystemScene.ts      # Three.js 场景核心逻辑
│   ├── planetData.ts            # 天体数据配置
│   └── UniverseLoading.vue      # 加载动画组件
└── locales/
    ├── zh.ts                    # 中文翻译
    └── en.ts                    # 英文翻译

架构说明

1. 主页面 (SolarSystem.vue)

负责 UI 层面的控制，包括：

• 状态管理: 配置面板、导航面板、信息面板的显示状态
• 交互控制: 速度调节、显示开关、语言切换
• 事件处理: 天体点击、跟随模式、焦点切换

2. 场景核心 (SolarSystemScene.ts)

基于 Three.js 的 3D 场景实现，包含：

• 渲染系统: WebGL 渲染器、相机、轨道控制器
• 天体系统: 太阳、行星、卫星、彗星、矮行星
• 特效系统: 星空背景、银河系、河外星系、星座连线
• 标签系统: CSS2DRenderer 实现的 HTML 标签

3. 数据配置 (planetData.ts)

定义所有天体的物理参数和显示信息：

• 行星数据：半径、距离、公转周期、轨道倾角
• 卫星数据：各行星的卫星配置
• 彗星数据：轨道参数和周期
• 其他天体：黑洞、小行星带、柯伊伯带

功能特性

交互操作

操作	桌面端	移动端
旋转视角	左键拖动	单指滑动
平移视角	右键拖动	双指滑动
缩放	滚轮	双指捏合
查看信息	点击天体	点击天体

配置面板

• 语言切换: 中文 / English
• 速度控制: 0.1x ~ 100x 时间流速
• 显示设置:
  • 彗星显示/隐藏
  • 卫星显示/隐藏（月球始终显示）
  • 标签显示/隐藏
  • 银河系显示/隐藏
  • 河外星系显示/隐藏
  • 星座连线显示/隐藏
  • 地球云层显示/隐藏
  • 地球夜晚模式切换
  • 金星云层显示/隐藏

导航面板

快速定位到指定天体：

• 全景: 重置视角
• 恒星: 太阳
• 行星: 水星、金星、地球、火星、木星、土星、天王星、海王星、冥王星
• 彗星: 哈雷彗星、恩克彗星、斯威夫特-塔特尔彗星等
• 其他: 黑洞、小行星带、柯伊伯带

信息面板

点击天体后显示详细信息：

• 天体名称（中英文）
• 物理参数（直径、距离、周期等）
• 科学描述
• 跟随模式开关

跟随模式

开启后相机将跟随选中天体运动，保持相对距离。

纹理系统

纹理路径

public/textures/planets2/
├── sun.jpg              # 太阳
├── mercury.jpg          # 水星
├── venus.jpg            # 金星
├── venus_atmosphere.jpg # 金星云层
├── earth.jpg            # 地球（白天）
├── earth_night.jpg      # 地球（夜晚）
├── earth_cloud.jpg      # 地球云层
├── mars.jpg             # 火星
├── jupiter.jpg          # 木星
├── saturn.jpg           # 土星
├── saturn_ring.png      # 土星环
├── uranus.jpg           # 天王星
├── neptune.jpg          # 海王星
├── pluto.jpg            # 冥王星
└── moon.jpg             # 月球

纹理加载

• 预加载机制：启动时批量加载所有纹理
• 进度显示：加载进度实时更新
• 降级处理：纹理加载失败时使用程序生成纹理

天体特效

太阳

• 自发光材质
• 动态光晕效果
• 脉动动画

行星

• 真实纹理映射
• 轨道运动动画
• 自转动画
• 光晕效果

土星环

• 优先使用纹理渲染
• 降级为粒子系统
• 独立旋转动画

地球

• 可切换白天/夜晚纹理
• 可叠加云层效果

彗星

• 椭圆轨道运动
• 彗尾粒子效果
• 近日点/远日点计算

星空背景

• 随机分布的背景星点
• 闪烁动画效果
• 银河系粒子云
• 河外星系光点
• 星座连线和标签

国际化

支持中英文双语切换：

• 所有 UI 文本
• 天体名称
• 信息描述
• 操作提示

性能优化

• 纹理预加载
• 粒子系统数量控制
• 视锥剔除
• 材质复用
• requestAnimationFrame 动画循环

技术栈

• Vue 3: 组件框架
• Three.js: 3D 渲染引擎
• TypeScript: 类型安全
• CSS2DRenderer: HTML 标签渲染
• OrbitControls: 轨道控制器