# Three.js实战项目

**Repository Path**: wang-lc0316/Three.js-project

## Basic Information

- **Project Name**: Three.js实战项目
- **Description**: Three.js实战项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-27
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Three.js 3D 图形项目

这是一个基于 Three.js 的 3D 图形项目，包含太阳系模拟、3D 建筑模型等多种 3D 可视化功能。该项目旨在展示 Three.js 的各种功能特性，包括 3D 模型加载、粒子效果、相机控制和动画等。

## 项目预览

### 太阳系模拟

![太阳系模拟](src/assets/太阳系.png)

### 3D 建筑模型

![3D建筑模型](src/assets/建房子.png)

## 项目结构

```
├── index.html           # 项目入口 HTML 文件
├── package.json         # 项目依赖配置
├── pnpm-lock.yaml       # pnpm 依赖锁定文件
└── src/
    ├── assets/          # 静态资源文件夹
    │   ├── AcidBoiling.json            # 粒子效果配置
    │   ├── Cartoon Blue Flamethrower.json  # 粒子效果配置
    │   ├── hdr/         # HDR 贴图文件夹
    │   ├── models/      # 3D 模型文件夹
    │   ├── running/     # 可能包含动画相关资源
    │   ├── styles/      # 样式文件
    │   ├── subEmitter2.json           # 子发射器配置
    │   ├── sunAxes/     # 太阳坐标轴相关资源
    │   └── texture/     # 纹理贴图文件夹
    ├── lib/             # 核心库文件
    │   ├── camera/      # 相机相关模块
    │   ├── mesh/        # 网格相关模块
    │   ├── renderer/    # 渲染器相关模块
    │   └── scene/       # 场景相关模块
    ├── main.js          # 项目主入口文件
    └── work/            # 工作目录
        ├── 太阳系模拟.js  # 太阳系模拟功能实现
        └── 房子.js        # 3D建筑模型实现
```

## 功能特点

- Three.js 3D 渲染引擎的基础应用
- 太阳系模拟系统，包含行星轨道运动和自转效果
- 3D 建筑模型展示，可交互的房子模型
- 高级粒子效果系统，支持复杂的视觉特效
- 3D 模型加载和渲染功能
- 自定义材质和纹理处理
- 相机控制和场景交互
- 动画系统和物理模拟

## 安装与运行

### 前置要求

- Node.js (v14 或更高版本)
- pnpm 包管理器

### 安装步骤

1. 克隆或下载项目到本地

2. 安装项目依赖

   ```bash
   pnpm install
   ```

3. 运行开发服务器

   ```bash
   pnpm run dev
   ```

4. 构建生产版本
   ```bash
   pnpm run build
   ```

## 使用说明

### 太阳系模拟

项目包含一个太阳系模拟实现，位于 `src/work/太阳系模拟.js` 文件中。该模块实现了：

- 太阳和行星的创建
- 行星轨道运动
- 自转与公转效果
- 行星纹理贴图
- 交互式控制和视角切换

### 3D 建筑模型

项目还包含一个 3D 建筑模型实现，位于 `src/work/房子.js` 文件中。该模块实现了：

- 3D 房子模型的创建
- 建筑材质和纹理
- 内部结构和细节展示
- 交互式浏览功能

### 自定义粒子效果

在 `src/assets/` 目录下包含了多个粒子效果配置文件，可以用于创建各种视觉效果。

### 模型加载与渲染

项目支持加载和渲染 3D 模型，可以在 `src/lib/mesh/` 目录下找到相关实现。

## 技术栈

- Three.js - 3D 渲染库
- JavaScript - 主要开发语言
- 可能使用的其他库（根据 package.json 确定）

## 开发指南

### 添加新功能

1. 在 `src/lib/` 目录下创建新的模块
2. 在 `main.js` 中引入并使用新模块
3. 确保遵循项目现有的代码风格和结构

### 资源管理

- 将 3D 模型放入 `src/assets/models/`
- 将纹理放入 `src/assets/texture/`
- 将粒子效果配置放入 `src/assets/`

## 注意事项

- 确保大型资源文件（如高分辨率纹理、复杂 3D 模型）经过优化，以提高加载速度
- 对于复杂场景，考虑使用性能优化技术如 Level of Detail (LOD) 和视锥体剔除
- 在移动设备上测试性能表现，适当调整效果以保证流畅体验

## 许可证

[MIT]

## 联系信息

如有问题或建议，请联系项目维护者。