# threejs-3d-earth

**Repository Path**: chaoo/threejs-3d-earth

## Basic Information

- **Project Name**: threejs-3d-earth
- **Description**: Three.js(0.181.2) + GeoJSON 实现3D地球地图
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# threejs-3d-earth

基于 Vue 3 + TypeScript + Three.js 的 3D 天文可视化项目，主要实现了地球、地形和太阳系三种不同的 3D 可视化模式。

![](public/20251218170932.webp)

## 核心功能
- **3D 地球可视化** - 基于 GeoJSON 数据的地球渲染
- **地形显示** - 带高度图的 3D 地球地形
- **太阳系模拟** - 完整的太阳系行星运动系统


## 技术架构
**前端框架**：Vue 3 + TypeScript
**3D 引擎**：Three.js ^0.181.2
**地理数据**：GeoJSON 格式
**构建工具**：Vite 7.2.4


## 模块结构
```
src/
├── components/            # Vue 组件
│   ├── Earth3D.vue        # 3D 地球组件
│   ├── Earth3DTerrain.vue # 地形地球组件
│   └── SolarSystem.vue    # 太阳系组件
├── utils/               # 工具函数
│   ├── solarSystem.ts   # 太阳系逻辑类
│   ├── starField.ts     # 星空背景
│   ├── drawGeo.ts       # GeoJSON 绘制
│   └── mapTexture.ts    # 地图纹理生成
├── assets/              # 静态资源
│   ├── img/             # 纹理图片
│   └── json/            # 地理数据
└── App.vue              # 主入口
```

## 运行项目
```bash
npm install
npm run dev
```


## 主要特性
SolarSystem 组件
- 支持太阳系 9 大行星
- 实时轨道运动模拟
- 行星跟随功能
- 星空背景渲染
- 交互控制面板
- 键盘快捷键支持（Space 跟随切换，F 聚焦，ESC 取消）


## 贴图资源
太阳系各大行星3D展开贴图资源：
https://www.solarsystemscope.com/textures/


## 贡献指南
欢迎提交 Issue 和 Pull Request！请遵循项目代码风格和提交规范。