基于 React Three Fiber 的 3D 点云标注工具，支持创建、编辑 3D 包围盒标注，适用于自动驾驶数据标注场景。
- 🎯 点云渲染：支持加载和渲染 PCD 格式点云数据
- 📦 3D 标注框：创建、编辑、删除 3D Bounding Box
- 🦅 BEV 视图：鸟瞰图同步显示（正交相机俯视角度）
- 🏷️ 多类别标注：支持汽车、行人、骑行者、卡车等类别
- 💾 数据导入导出：JSON 格式标注数据的导入/导出
- ⌨️ 快捷键支持：高效的键盘操作体验
- 🎨 现代 UI：基于 Tailwind CSS + shadcn/ui 的精美界面
| 类别 | 技术 |
|---|---|
| 框架 | Next.js 16 (App Router) |
| 语言 | TypeScript 5 |
| 3D 渲染 | React Three Fiber + @react-three/drei |
| 状态管理 | Zustand + Immer |
| UI 组件 | Tailwind CSS + shadcn/ui |
| 代码质量 | ESLint + Prettier + Husky + lint-staged |
pnpm installpnpm dev打开 http://localhost:3000 查看应用。
pnpm build
pnpm start| 按键 | 功能 |
|---|---|
1 |
切换到查看模式 |
2 |
切换到创建模式 |
3 |
切换到编辑模式 |
4 |
切换到删除模式 |
B |
切换 BEV 鸟瞰图 |
Delete |
删除选中的标注 |
Esc |
取消选择 / 返回查看模式 |
| 操作 | 功能 |
|---|---|
| 左键拖拽 | 旋转视角 |
| 右键拖拽 | 平移视角 |
| 滚轮 | 缩放视角 |
| 左键点击 | 选择/创建标注 |
- 按
2进入创建模式 - 选择标注类别（汽车、行人等）
- 在 3D 场景中点击创建标注框
- 按
3进入编辑模式调整标注位置和大小 - 在右侧属性面板编辑标注详细信息
- 点击"导出"保存标注数据
src/
├── app/ # Next.js App Router
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ └── globals.css # 全局样式
├── components/
│ ├── canvas/ # 3D 渲染组件
│ │ ├── PointCloud.tsx # 点云组件
│ │ ├── BoundingBox.tsx# 标注框组件
│ │ └── Scene.tsx # 场景组件
│ ├── views/ # 视图组件
│ │ ├── MainView.tsx # 主 3D 视图
│ │ └── BEVView.tsx # BEV 鸟瞰图
│ ├── ui/ # UI 组件
│ │ ├── Toolbar.tsx # 工具栏
│ │ ├── AnnotationList.tsx # 标注列表
│ │ ├── PropertyPanel.tsx # 属性面板
│ │ └── HelpPanel.tsx # 帮助面板
│ └── Annotator.tsx # 主标注器组件
├── store/ # Zustand 状态管理
│ └── annotationStore.ts # 标注状态
├── types/ # TypeScript 类型定义
│ └── annotation.ts # 标注相关类型
├── utils/ # 工具函数
│ └── exportImport.ts # 导入导出功能
└── lib/ # 通用库
└── utils.ts # 工具函数
pnpm format # 格式化代码
pnpm format:check # 检查格式pnpm lint # 运行 ESLint 并修复
pnpm lint:check # 仅检查pnpm type-check # TypeScript 类型检查导出的 JSON 格式：
{
"version": "1.0.0",
"createdAt": "2024-01-01T00:00:00.000Z",
"annotations": [
{
"id": "abc123",
"position": [10.5, 0.75, -5.2],
"dimensions": [2.0, 1.5, 4.5],
"rotation": 0.785,
"category": "car",
"label": "轿车 #1"
}
]
}MIT License
Made with ❤️ using React Three Fiber