# three-gis

**Repository Path**: imageOptimize/three-gis

## Basic Information

- **Project Name**: three-gis
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-29
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Three.js 模块化架构项目

基于 Vue 3 + Vite + Three.js 的模块化 3D 可视化项目，采用单例模式管理场景、渲染器、相机等核心资源，适用于智慧园区、智慧城市等大型可视化场景。

## 特性

- 🎯 **模块化架构**：场景、渲染器、相机统一管理
- 🔄 **单例模式**：确保全局唯一的核心资源
- 📦 **对象组管理**：支持场景下钻和层级切换
- 🎨 **TypeScript 支持**：完整的类型定义
- 🚀 **性能优化**：支持动态加载/卸载对象，避免内存溢出

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Three.js** - 3D 图形库
- **TypeScript** - 类型安全的 JavaScript
- **lil-gui** - 轻量级 GUI 调试工具

## 项目结构

```
three-app/
├── src/
│   ├── components/          # Vue 组件
│   │   └── thre.vue        # Three.js 主组件
│   ├── utils/              # 工具模块
│   │   ├── camera.ts       # 相机管理器
│   │   ├── scene.ts        # 场景管理器
│   │   ├── renderer.ts     # 渲染器管理器
│   │   └── objectGroup.ts  # 对象组管理器
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── docs/
│   └── USAGE.md            # 使用文档
└── README.md               # 项目说明
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 核心概念

### 单例资源（全局唯一）

- **场景（Scene）**：整个应用只有一个场景实例
- **渲染器（Renderer）**：整个应用只有一个渲染器实例
- **相机（Camera）**：整个应用只有一个相机实例

### 动态内容

- **模型（Mesh/Model）**：可以动态添加/移除
- **材质（Material）**：可以动态创建和替换
- **灯光（Light）**：可以动态添加/移除
- **辅助对象**：坐标轴、光源辅助器等

## 使用文档

详细的使用文档请参考：[使用文档](./docs/USAGE.md)

### 快速示例

```typescript
// 初始化
import { sceneManager } from '@/utils/scene';
import { rendererManager } from '@/utils/renderer';
import { cameraManager } from '@/utils/camera';

// 初始化场景
sceneManager.init();

// 初始化渲染器
const canvas = document.querySelector('canvas');
const renderer = rendererManager.init(canvas);

// 初始化相机
cameraManager.init(canvas, renderer, {
    fov: 75,
    position: { x: 0, y: 2, z: 5 }
});

// 添加对象到场景
import { addToScene } from '@/utils/scene';
const mesh = new THREE.Mesh(geometry, material);
addToScene(mesh);

// 渲染
import { renderScene } from '@/utils/renderer';
import { getScene, getCamera } from '@/utils/scene';
renderScene(getScene(), getCamera());
```

## 适用场景

- 🏙️ 智慧城市可视化
- 🏢 智慧园区管理
- 🗺️ 3D 地图展示
- 📊 数据可视化大屏
- 🎮 3D 交互应用

## 最佳实践

1. **内存管理**：使用对象组管理不同层级，动态加载/卸载对象
2. **性能优化**：使用 LOD、对象池等技术
3. **代码组织**：通过管理器统一管理资源
4. **下钻功能**：使用对象组实现场景切换

## 开发指南

### 添加新功能

1. 在对应的管理器中添加方法
2. 导出便捷方法供外部使用
3. 更新使用文档

### 调试工具

项目集成了 `lil-gui`，可以在运行时调整参数：
- 相机位置和参数
- 对象位置和属性
- 光照参数
- 材质属性

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！