Kimap - 基于CAD平面图的3D室内建模工具

一个专为导入CAD平面图并转换为3D模型的建模工具，提供类似Photoshop的操作体验。

🎯 核心功能

工作流程

1. 导入CAD平面图 - 上传PNG/JPG格式的CAD室内平面图
2. 在平面图上描绘 - 沿着图纸上的墙线、家具轮廓进行描绘
3. 按需3D预览 - 点击预览按钮或按P键查看3D模型
4. 导出.kimap格式 - 保存为专有3D格式

核心特性

• CAD底图导入：支持PNG/JPG格式的平面图作为描绘底图
• 描绘工具：墙面描绘、区域划分、家具标注等工具
• 按需3D预览：点击预览按钮或按P键在弹窗中查看3D效果
• 图层管理：完整的图层系统，分层管理描绘内容
• 楼层管理：多楼层支持，每个楼层独立管理
• 导出为.kimap格式：专有格式，包含Three.js渲染数据

描绘工具栏

1. 选择工具 - 选择和编辑已描绘的元素
2. 墙面描绘 - 沿底图墙线描绘墙体
3. 区域划分 - 标注房间功能区域
4. 家具标注 - 在底图上放置家具（矩形）
5. 圆形物体 - 标注圆形家具或设备
6. 多边形 - 自定义形状标注
7. 门窗标注 - 在墙面上标注门窗位置
8. 楼梯 - 添加楼梯

右侧管理面板

1. 图层管理

   • 创建/删除/重命名图层
   • 图层可见性控制
   • 图层锁定/解锁
   • 图层颜色标识

2. 元素管理

   • 显示当前图层所有元素
   • 元素属性编辑
   • 元素删除/复制

3. 楼层管理

   • 添加/删除楼层
   • 楼层高度设置
   • 楼层切换

4. 底图控制（即将添加）

   • 透明度调整
   • 显示/隐藏切换
   • 比例尺设置

完整工作流程

1. 导入CAD底图 - 点击顶部"导入CAD底图"按钮，选择平面图
2. 设置比例尺（可选）- 标定实际尺寸
3. 描绘墙面 - 使用墙面工具沿底图墙线描绘
4. 标注门窗 - 在墙面上标注门窗位置
5. 添加家具 - 使用家具工具在底图上放置
6. 预览3D效果 - 点击"3D预览"按钮或按P键查看3D模型
7. 微调参数 - 调整墙高、厚度等
8. 导出模型 - 保存为.kimap文件

快捷键

• P - 打开3D预览
• ESC - 关闭3D预览
• Ctrl+Z - 撤销
• Ctrl+Y - 重做
• Delete - 删除选中元素

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

构建生产版本

npm run build

🏗️ 项目结构

Kimap/
├── src/
│   ├── components/          # React组件
│   │   ├── TopBar.tsx       # 顶部工具栏（文件、编辑、视图等）
│   │   ├── Toolbar.tsx      # 左侧工具栏
│   │   ├── Canvas.tsx       # 中间画布（2D/3D）
│   │   ├── RightPanel.tsx   # 右侧管理面板
│   │   ├── 2d/              # 2D绘图相关组件
│   │   ├── 3d/              # 3D渲染相关组件
│   │   └── panels/          # 各种子面板组件
│   ├── store/               # 状态管理（Zustand）
│   │   └── useEditorStore.ts
│   ├── types/               # TypeScript类型定义
│   │   └── index.ts
│   ├── utils/               # 工具函数
│   │   ├── geometry.ts      # 几何计算
│   │   ├── export.ts        # 导出.kimap功能
│   │   └── three-helper.ts  # Three.js辅助函数
│   ├── App.tsx              # 主应用组件
│   ├── main.tsx             # 入口文件
│   └── index.css            # 全局样式
├── public/                  # 静态资源
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

📖 技术栈

• 框架: React 18 + TypeScript
• 构建工具: Vite 5
• 状态管理: Zustand
• 3D渲染: Three.js
• 样式: TailwindCSS
• 图标: Lucide React

🎨 设计参考

参考了蜂鸟地图 (https://cloud.fengmap.com/) 的交互设计和工作流程。

📝 .kimap文件格式

{
  "version": "1.0.0",
  "type": "kimap",
  "project": {
    "id": "uuid",
    "name": "项目名称",
    "floors": [...],
    "mapConfig": {...}
  },
  "threeData": {
    "geometry": {...},
    "materials": {...}
  },
  "exportedAt": "ISO8601时间戳"
}

🔧 开发指南

添加新工具

1. 在 src/types/index.ts 中添加工具类型
2. 在 src/store/useEditorStore.ts 中添加工具行为
3. 在 src/components/Toolbar.tsx 中添加工具按钮
4. 在 src/components/Canvas.tsx 中实现工具的绘制逻辑

自定义元素属性

在 src/types/index.ts 中扩展 Element 类型即可。

🐛 已知问题

• [ ] 复杂多边形的碰撞检测优化
• [ ] 大场景渲染性能优化
• [ ] 撤销/重做历史记录优化

📄 License

MIT

👥 贡献

欢迎提交 Issue 和 Pull Request！