# easy-threesdk-demo

**Repository Path**: xieqianstudent/easy-threesdk-demo

## Basic Information

- **Project Name**: easy-threesdk-demo
- **Description**: easy-threesdk 使用demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-05
- **Last Updated**: 2026-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Three.js 学习项目

这是一个用于系统学习 Three.js 的个人学习项目，旨在通过实践示例掌握 WebGL 3D 渲染技术。

## 技术栈

- **前端基础**：HTML5, 原生 JavaScript
- **3D 库**：Three.js
- **地图可视化**：OpenLayers
- **构建工具**：Vite

## 项目结构

项目采用示例导向的组织结构，每个 Three.js 知识点对应一个独立的示例目录：

```
threejs-vite/
├── [示例目录名]/     # 如 create3DSence 等
│   ├── index.html   # 示例页面
│   └── index.js     # 示例代码
├── package.json     # 项目配置
└── vite.config.js   # Vite 构建配置
```

## 示例目录命名规范

每个示例目录以学习的核心概念命名，如：

- `create3DSence` - 3D 场景创建基础
- `geometryBasic` - 几何体基础
- `materialStudy` - 材质系统学习

## 开发环境

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 访问指定示例地址

运行地址/[示例目录名]/index.html

### 构建生产版本

```bash
npm run build
```

## 学习路径

本项目按以下顺序逐步深入学习 Three.js：

1. 基础场景设置
2. 几何体与材质
3. 光照与阴影
4. 相机控制
5. 动画系统
6. 纹理与贴图
7. 加载外部模型
8. 性能优化
9. 高级特效

## 注意事项

- 每个示例目录都是独立的学习单元，可以单独运行和理解
- 示例代码中包含详细注释，便于理解每个关键步骤
- 随着学习的深入，示例会逐步增加和更新

## 参考资源

- [Three.js 官方文档](https://threejs.org/docs/)
- [Three.js 官方示例](https://threejs.org/examples/)

## 许可证

本项目仅供个人学习使用。