# nav_controller_system

**Repository Path**: ccpdead/nav_controller_system

## Basic Information

- **Project Name**: nav_controller_system
- **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-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 机器人巡检调度监控系统 (Robot Inspection Scheduler)

![alt text](image.png)

这是一个基于 Web 的机器人巡检调度可视化控制平台，专为展示和管理移动机器人（AGV/AMR）在复杂环境中的运行状态而设计。系统利用 **Three.js** 技术实现了高性能的 3D 场景渲染，支持点云地图（PCD）和栅格地图（PGM）的即时加载与叠加显示。

## 🚀 项目特性

- **3D 场景可视化**: 
  - 基于 Three.js 构建，支持全视角的 3D 场景漫游。
  - 支持 OrbitControls 交互（旋转、缩放、平移）。

- **多模态地图支持**:
  - **PGM 栅格地图**: 支持加载标准的 ROS `.pgm` 格式地图，配备 `.yaml` 配置文件解析。系统采用了平面纹理映射技术，去除了传统的高度立柱显示，提供更清晰的底图参照。
  - **PCD 点云地图**: 支持加载 `.pcd` 格式的 3D 点云数据，用于展示真实的环境三维结构。支持自定义点云颜色、大小和高度偏移。

- **机器人状态监控**:
  - 实时显示机器人的位置、朝向和在线状态。
  - 支持显示机器人的 **全局路径**（规划路径）和 **局部路径**（动态避障路径）。

- **拓扑路网**:
  - 可视化显示调度系统的拓扑节点和边，展示机器人的预设行驶路线。

- **交互式配置**:
  - 提供图形化界面加载本地地图文件。
  - 支持动态调整图层显隐（地图、点云、路径、机器模型等）。

## 🛠 技术栈

本项目的核心技术架构如下：

- **前端技术**:
  - **语言**: HTML5, CSS3, JavaScript (ES6+ Modules)
  - **3D 引擎**: [Three.js](https://threejs.org/) (v0.160.0) - 用于所有 3D 场景的渲染。
  - **模块化**: 使用原生 ES Modules 进行代码组织，无需复杂的打包工具配置。

- **后端/服务**:
  - **运行环境**: Node.js
  - **服务器**: 自研轻量级 HTTP Server (位于 `server.js`)，支持静态资源服务和局域网访问。
  - **依赖管理**: npm

## 📂 数据存储说明

**Q: Web端加载的 PCD 和 PGM 数据存放在哪里？**

A: 本系统采用了 **前端实时解析** 的模式：
1. **无需上传**: 当您在网页中点击"加载地图"并选择本地文件时，文件 **不会** 被上传到服务器硬盘。
2. **内存处理**: 浏览器使用 HTML5 File API 直接读取文件内容到内存中。
3. **即时渲染**: 
   - **PGM**: 使用 Canvas API 将二进制数据转换为纹理贴图。
   - **PCD**: 解析点云坐标数据并生成 Three.js 的 BufferGeometry。
   - 所有数据仅存在于当前浏览器会话的内存中，刷新页面后需重新加载。

## 📦 安装与运行

### 前置要求
- Node.js 环境 (建议 v12.0.0 以上)

### 1. 安装依赖
在项目根目录下运行：
```bash
npm install
```

### 2. 启动服务
```bash
npm run dev
```
或者
```bash
node server.js
```

### 3. 访问应用
服务器启动后，控制台会输出访问地址：
- **本地访问**: http://localhost:3000
- **局域网访问**: http://[你的局域网IP]:3000 (支持同网络下的其他设备访问)

## 📁 目录结构

```
.
├── src/
│   ├── components/     # 功能组件
│   │   ├── MapRenderer.js      # 地图渲染核心
│   │   ├── RobotManager.js     # 机器人模型与状态管理
│   │   ├── PathManager.js      # 路径绘制管理
│   │   ├── TopologyManager.js  # 拓扑图管理
│   │   └── UIController.js     # UI交互逻辑
│   ├── loaders/        # 地图加载器
│   │   ├── PGMLoader.js        # .pgm 和 .yaml 解析器
│   │   └── PCDLoader.js        # .pcd 点云解析器
│   ├── data/           # 模拟数据源
│   ├── styles/         # CSS 样式文件
│   └── main.js         # 程序入口
├── index.html          # 主页面
├── server.js           # 简易 HTTP 服务器
├── package.json        # 项目配置
└── README.md           # 项目文档
```

## 🖥️ 使用指南

1. **加载地图**: 点击右上角工具栏的 `📂 加载地图` 按钮。
2. **导入文件**: 
   - 拖拽或选择 `.pgm` 文件（建议同时加载对应的 `.yaml` 以获取分辨率和原点信息）。
   - 拖拽或选择 `.pcd` 文件。
3. **调整视图**: 点击 `应用` 后，使用鼠标左键旋转、右键平移、滚轮缩放查看场景。
4. **图层控制**: 使用左侧面板的复选框来开启/关闭 栅格地图、点云、路径或机器人的显示。