# webgl-dev-lab

**Repository Path**: e-zhou/webgl-dev-lab

## Basic Information

- **Project Name**: webgl-dev-lab
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-05
- **Last Updated**: 2025-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebGL Dev Lab - Vue Edition

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3-green.svg" alt="Vue 3">
  <img src="https://img.shields.io/badge/TypeScript-blue.svg" alt="TypeScript">
  <img src="https://img.shields.io/badge/Vite-yellow.svg" alt="Vite">
  <img src="https://img.shields.io/badge/Tailwind%20CSS-purple.svg" alt="Tailwind CSS">
  <img src="https://img.shields.io/badge/Cesium-blue.svg" alt="Cesium">
  <img src="https://img.shields.io/badge/Three.js-green.svg" alt="Three.js">
  <img src="https://img.shields.io/badge/Mapbox-orange.svg" alt="Mapbox">
</p>

一个功能丰富的WebGL开发示例实验室，基于Vue 3 + TypeScript构建，集成了Cesium、Three.js和Mapbox等主流WebGL技术，提供了丰富的示例代码和交互式体验。

## 🚀 功能特性

- **多技术栈集成**：同时支持Cesium、Three.js和Mapbox三种主流WebGL技术
- **分类浏览**：按技术类别和功能分类组织示例
- **在线编辑器**：内置Monaco Editor，支持实时编辑和预览代码
- **响应式设计**：适配各种设备屏幕尺寸
- **代码高亮**：支持HTML、CSS和JavaScript语法高亮
- **示例详情**：包含示例描述、难度等级、标签等详细信息
- **搜索功能**：支持按关键词搜索示例

## 📁 项目结构

```
webgl-dev-lab/
├── components/          # Vue组件
│   ├── ui/              # UI组件库
│   ├── figma/           # Figma相关组件
│   ├── CategorySidebar.vue  # 分类侧边栏
│   ├── CodeEditor.vue       # 代码编辑器
│   ├── CodePreview.vue      # 代码预览
│   ├── ExampleCard.vue      # 示例卡片
│   ├── ExampleDetail.vue    # 示例详情页
│   └── ExampleGrid.vue      # 示例网格
├── data/                # 示例数据
│   └── examples.ts      # 示例和分类数据
├── gallery/             # 示例代码库
│   ├── cesium/          # Cesium示例
│   ├── threejs/         # Three.js示例
│   └── mapbox/          # Mapbox示例
├── services/            # 服务层
│   └── ExampleService.ts # 示例数据服务
├── styles/              # 样式文件
│   └── globals.css      # 全局样式
├── types/               # TypeScript类型定义
│   └── types.ts         # 核心类型定义
├── App.vue              # 主应用组件
├── main.ts              # 应用入口
└── vite.config.ts       # Vite配置
```

## 🛠️ 技术栈

- **前端框架**：Vue 3 + Composition API
- **编程语言**：TypeScript
- **构建工具**：Vite
- **CSS框架**：Tailwind CSS
- **UI组件**：自定义组件库（符合设计规范）
- **代码编辑器**：Monaco Editor
- **WebGL技术**：
  - Cesium (地理信息可视化)
  - Three.js (3D图形渲染)
  - Mapbox (交互式地图)

## 📋 快速开始

### 前提条件

- Node.js 18+ 
- npm/yarn/pnpm

### 安装依赖

```bash
# 使用pnpm（推荐）
pnpm install

# 或使用npm
npm install

# 或使用yarn
yarn install
```

### 开发模式

```bash
# 使用pnpm
pnpm dev

# 或使用npm
npm run dev

# 或使用yarn
yarn dev
```

开发服务器将在 http://localhost:5173 启动（端口可能会根据可用性变化）。

### 构建生产版本

```bash
# 使用pnpm
pnpm build

# 或使用npm
npm run build

# 或使用yarn
yarn build
```

构建后的文件将位于 `dist` 目录中。

### 预览生产版本

```bash
# 使用pnpm
pnpm preview

# 或使用npm
npm run preview

# 或使用yarn
yarn preview
```

## 🎯 使用指南

### 浏览示例

1. 在首页选择技术栈（Cesium/Three.js/Mapbox）
2. 从左侧分类菜单中选择感兴趣的类别
3. 浏览右侧的示例卡片网格
4. 点击任何示例卡片查看详情和代码

### 编辑和运行代码

1. 在示例详情页，可以看到左侧的代码编辑器和右侧的预览区域
2. 编辑HTML、CSS或JavaScript代码
3. 点击"运行"按钮查看效果
4. 可以随时重置代码到原始状态

### 搜索功能

- 在示例网格页面顶部的搜索框中输入关键词
- 搜索结果将实时显示

## 📚 示例分类

### Cesium 示例

- **基础功能**：基础地球场景、实体标记信息窗口
- **地形渲染**：地形高程渲染
- **3D模型**：3D城市建筑
- **气象数据**：天气数据可视化
- **动画效果**：卫星轨道跟踪

### Three.js 示例

- **几何体**：基础几何体示例
- **光照材质**：材质和光照示例
- **物理引擎**：弹跳球物理模拟、粒子物理模拟
- **高级效果**：高级材质渲染、粒子动画效果
- **3D模型**：3D车辆模型

### Mapbox 示例

- **地图基础**：基础交互式地图
- **数据可视化**：热力图可视化、路线规划地图
- **交互功能**：触摸手势控制、动态车辆跟踪

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可协议

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 📧 联系我们

如有问题或建议，请随时提交Issue或联系项目维护者。

## 🙏 鸣谢

感谢所有为WebGL技术发展做出贡献的开发者和组织。

---

**WebGL Dev Lab - Vue Edition** © 2024 | 使用现代Web技术构建的WebGL开发示例平台