# archive-3d-visualization

**Repository Path**: Alexander360/archive-3d-visualization

## Basic Information

- **Project Name**: archive-3d-visualization
- **Description**: 煤矿智能化运维档案3D可视化管理
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-30
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 煤矿档案室 3D 可视化系统

基于 Three.js 的交互式 3D 档案室可视化系统，实现了完整的档案管理可视化功能。

![2026-01-30_115712](./assets/2026-01-30_115712.png)

## 📁 项目结构

```
archive/
├── index-new.html          # 新版主页面（推荐使用）
├── index.html              # 旧版主页面（保留）
├── css/
│   └── main.css           # 样式文件
├── js/
│   ├── main.js            # 主入口文件
│   ├── constants.js       # 常量配置
│   ├── scene.js           # 3D场景管理
│   ├── cabinets.js        # 档案柜渲染
│   ├── stats.js           # 统计面板
│   ├── detail.js          # 详情面板
│   ├── search.js          # 搜索功能
│   └── animation.js       # 动画效果
└── data/
    └── boxData.js         # 档案盒详细数据（62个档案盒）
```

## ✨ 核心功能

### 1. 统计面板 (左上角)
- 档案柜总数：9个
- 档案盒总数：62个
- 业务类别：9大类
- **保存期限分布图** (饼图)
- **业务类型分布图** (柱状图)
- 可折叠/展开

### 2. 搜索和筛选 (顶部中央)
- 🔍 **实时搜索**
  - 支持档案编号搜索 (如 "ORG-2025-001")
  - 支持名称模糊搜索 (如 "组织架构")
  - 支持内容关键词搜索 (如 "职责说明书")

- 🎯 **筛选功能**
  - 按业务类型筛选 (支持多选)
  - 按保存期限筛选

- ✈️ **相机飞行**
  - 点击搜索结果，相机自动飞向对应档案柜
  - 高亮显示3秒

### 3. 详情面板 (右侧)
- **两级导航**
  - 第一级：点击档案柜 → 显示档案盒列表（卡片布局）
  - 第二级：点击档案盒卡片 → 显示详细内容

- **档案盒详情包括**
  - 档案编号 (如 ORG-2025-001)
  - 档案名称
  - 保存期限 (永久/10年/5年/3年)
  - 查阅频率
  - 存放内容清单 (完整列表)
  - 备注信息

### 4. 3D 交互
- **鼠标悬停**: 档案柜高亮显示
- **点击档案柜**: 显示档案盒列表
- **轨道控制**: 鼠标拖拽旋转、滚轮缩放
- **相机限制**: 防止钻入地下

### 5. 颜色标识系统
遵循 MD 文档 3.2 节标准:
- 🔴 **红色**: 永久保存
- 🟡 **黄色**: 10年
- 🔵 **蓝色**: 5年
- 🟢 **绿色**: 3年

## 🚀 使用方法

### 方式1: 直接打开 (推荐)
```bash
# 打开新版页面
直接双击 index.html
```

### 方式2: 本地服务器
```bash
# 使用 Python
python -m http.server 8000

# 使用 Node.js (http-server)
npx http-server -p 8000

# 然后访问
http://localhost:8000/index.html
```

## 🎮 操作指南

### 基本操作
- **旋转视角**: 鼠标左键拖拽
- **缩放**: 鼠标滚轮
- **平移**: 鼠标右键拖拽

### 查看档案
1. 点击任意档案柜 → 右侧显示该柜的档案盒列表
2. 点击档案盒卡片 → 显示详细内容清单
3. 点击"返回"按钮 → 回到档案盒列表
4. 点击"×"按钮 → 关闭详情面板

### 搜索档案
1. 在顶部搜索框输入关键词
2. 实时显示匹配结果
3. 点击搜索结果 → 相机自动飞向目标档案柜
4. 自动显示详情面板

### 筛选档案
1. 使用筛选器选择业务类型或保存期限
2. 系统自动过滤并显示匹配结果

## 📊 数据说明

### 档案柜布局 (U型环绕布局)

档案柜沿房间墙壁摆放，形成更真实的档案室布局：

**左墙 (面向入口左侧):**
- A01: 组织制度 (6个档案盒)
- E01: 评价考核 (6个档案盒)
- I01: 汇报对接 (5个档案盒)

**后墙 (对面墙壁):**
- B01: 规划预算 (5个档案盒)
- C01: 系统档案 (12个档案盒)
- D01: 运维记录 (8个档案盒)
- F01: 培训档案 (6个档案盒)

**右墙 (面向入口右侧):**
- G01: 供应商 (6个档案盒)
- H01: 知识标准 (8个档案盒)

**中央区域 (特殊柜):**
- S01: 保密柜 (双人双锁)
- T01: 工具柜
- W01: 待归档区

### 数据来源
所有档案盒详细数据均从 `煤矿常态化运行档案盒.md` 文档第二部分手工提取，确保数据准确性。

## 🛠️ 技术栈

- **3D 渲染**: Three.js v0.160.0
- **动画库**: TWEEN.js v23.1.1
- **图表库**: Chart.js v4.4.0
- **开发模式**: ES6 Modules
- **样式**: 原生 CSS (响应式设计)

## 📝 依赖库 (CDN)

所有依赖库通过 CDN 加载，无需本地安装：
- Three.js: https://unpkg.com/three@0.160.0
- TWEEN.js: https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@23.1.1
- Chart.js: https://cdn.jsdelivr.net/npm/chart.js@4.4.0

## 🎨 响应式设计

- **桌面端** (>1200px): 完整功能
- **平板端** (768px-1200px): 缩小面板
- **移动端** (<768px): 简化布局

## 🔧 自定义配置

### 修改颜色
编辑 `js/constants.js` 中的 `COLORS` 对象

### 修改布局
编辑 `js/constants.js` 中的 `LAYOUT` 对象

### 修改动画参数
编辑 `js/constants.js` 中的 `ANIMATION` 对象

### 修改档案数据
编辑 `data/boxData.js` 中的 `boxDetailedData` 对象

## ⚡ 性能优化

- 使用 InstancedMesh 优化多对象渲染（预留）
- 场景雾化效果减少远处渲染负担
- 阴影贴图优化
- 图表按需渲染
- 搜索防抖（300ms）

## 🐛 已知问题

1. **档案盒数量**: 当前档案盒按简化布局显示，未完全按实际位置排列
2. **柜门动画**: 功能已实现但未集成到UI（预留扩展）
3. **移动端**: 建议使用桌面端浏览器获得最佳体验

## 📄 许可证

本项目仅供学习和演示，实际应用还需评估开发。

---

**提示**: 首次加载可能需要几秒钟下载依赖库，请耐心等待。