lhpall

基于 Vue 3 + Three.js 的工业仓储/物流场景 3D 可视化前端应用

适用于工业仓储、物流调度、AGV 管理等场景的 3D 可视化引擎与后台管理组件库。

技术栈

| 类别 | 技术 | | -------- | -------------------------------------------- | | 框架 | Vue 3.5 (Composition API / <script setup>) | | 语言 | TypeScript | | 构建 | Vite | | UI 组件 | Ant Design Vue 4.x | | 3D 引擎 | Three.js 0.160 | | 动画 | @tweenjs/tween.js | | HTTP | Axios | | 路由 | Vue Router | | 状态管理 | Pinia |

目录结构

src/
├── main.ts                         # 应用入口
├── App.vue                         # 根组件
│
├── api/                            # HTTP 请求基础设施
│   ├── index.ts                    # 基础 Api 类 (axios 封装)
│   └── types.ts                    # API 泛型类型定义
├── HttpApi.ts                      # HttpApi 类 (预设 baseURL, 统一响应格式)
├── createApiOptions.ts             # 动态 API 配置生成
│
├── components/                     # 通用 UI 组件
│   ├── FetchSelect.vue             # 远程搜索下拉选择器
│   ├── Ellipsis.vue                # 文本溢出省略 + Tooltip
│   ├── upload-input.tsx            # 文件上传输入组件
│   ├── autoform/                   # 动态表单生成器 (15 种输入类型)
│   └── drawer-form/                # 抽屉表单组件
│
├── Scene/                          # 3D 场景可视化引擎 (核心模块)
│   ├── Scene.ts                    # 主场景类 (继承 THREE.Object3D)
│   ├── MeshElement.ts              # 场景网格元素 (附带业务数据)
│   ├── InstancedElement.ts         # 实例化元素 (高性能批量渲染)
│   ├── ArrowLineElement.ts         # 箭头线元素 (路径连线 + 箭头)
│   ├── OrbitControls.ts            # 轨道控制器 (锁定俯视图)
│   ├── createText.ts               # 3D 文字创建
│   ├── MapScene/                   # 仓储地图场景
│   │   ├── index.ts                # 地图主场景
│   │   ├── History.ts              # 撤销/重做历史记录
│   │   └── models/                 # 3D 模型 (AGV/充电桩/站点/容器等)
│   ├── SceneSelect/                # 场景交互选择 (点选/框选)
│   └── three_modified/             # Three.js 定制工具
│
├── icons/                          # SVG 图标系统 (44 个图标)
│   └── icon.vue                    # 动态 SVG 图标组件
│
├── configToObject/                 # 配置值解析工具
├── event-dispatcher/               # 事件分发器
├── utils.ts                        # 通用工具函数
└── jsx-utils.ts                    # JSX/TSX 辅助工具

功能模块

3D 场景引擎

• MapScene — 仓储地图 3D 场景，支持 AGV、站点、充电桩、货架等元素的模型加载与渲染
• SceneSelect — 场景交互选择系统，支持 Raycaster 点选和 Frustum 框选
• InstancedElement — 基于 InstancedMesh 的高性能批量实例化渲染
• ArrowLineElement — 直线 / NURBS 曲线路径连线渲染
• History — 编辑历史撤销/重做 (最多 10 步)

UI 组件

• AutoForm — 配置驱动的动态表单，支持 15 种输入类型 (string/number/select/checkbox/switch/date/textarea/radiogroup 等)
• DrawerForm — 基于 AutoForm + Drawer 的抽屉表单
• FetchSelect — 支持远程搜索、分页、防抖的下拉选择器

图标库

| Icon | Name | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | | agv | | | alarm | | | all-errors | | | back-home | | | borad | | | charger | | | config | | | container | | | device | | | earth | | | editor | | | error | | | flow | |