# 太阳系可视化

**Repository Path**: Chancy599/visualizing-the-solar-system

## Basic Information

- **Project Name**: 太阳系可视化
- **Description**: 这是一个基于Vue.js和Three.js构建的3D太阳系可视化模型，展示了太阳和八大行星（水星、金星、地球、火星、木星、土星、天王星和海王星）。每个行星以不同的速度和距离围绕太阳运行，以简化的方式模拟真实太阳系的运行机制。

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-02-28
- **Last Updated**: 2025-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 太阳系可视化

基于Vue.js和Three.js构建的3D太阳系可视化项目。

## 概述

本项目创建了一个3D太阳系模型，展示了太阳和八大行星（水星、金星、地球、火星、木星、土星、天王星和海王星）。每个行星以不同的速度和距离围绕太阳运行，以简化的方式模拟真实太阳系的运行机制。

## 功能特点

- 逼真的太阳系3D可视化效果
- 交互式摄像机控制（轨道旋转、缩放、平移）
- 行星以不同速度围绕太阳运行
- 显示每个行星的轨道路径
- 响应式设计，自适应窗口大小变化
- 行星自转效果

## 环境要求

- Node.js和npm
- Vue.js框架

## 项目结构

主要组件位于`src/components/ThreeJs.vue`。

## 安装步骤

1. 克隆仓库
```bash
git clone https://gitee.com/Chancy599/visualizing-the-solar-system.git
cd visualizing-the-solar-system
```

2. 安装依赖
```bash
npm install
```

3. 安装Three.js及所需模块
```bash
npm install three
```

4. 运行开发服务器
```bash
npm run serve
```

## 使用方法

- **轨道控制**：点击并拖动鼠标可旋转视图
- **缩放**：使用鼠标滚轮放大或缩小
- **平移**：右键点击并拖动可平移视图

## 技术细节

### 使用的技术

- **Vue.js**：前端框架
- **Three.js**：3D图形库
- **OrbitControls**：轨道控制器，用于交互式摄像机控制

### 主要实现

- 使用Three.js创建3D场景、相机和渲染器
- 通过SphereGeometry创建太阳和行星
- 实现行星围绕太阳的公转和自转
- 使用RingGeometry显示行星轨道
- 添加点光源模拟太阳发光效果
- 实现响应式设计，适应窗口大小变化

## 自定义行星数据

行星数据在planetsData数组中定义，包括：
- name：行星名称
- radius：轨道半径
- size：行星大小
- color：行星颜色
- speed：公转速度

可以通过修改这些参数来自定义太阳系模型。

## 后续改进方向

- 添加行星贴图，提高真实感
- 实现月球和其他卫星
- 添加星云背景
- 实现行星标签和信息面板
- 优化移动设备上的性能和体验