机器人关键帧编辑器

基于 Web 的机器人运动编辑工具，支持 URDF 加载、CSV 轨迹编辑、双视口对比和工程文件管理。

Other language: English

🌐 在线体验

motion-editor.cyoahs.dev | 托管于 Cloudflare Pages

🔒 隐私安全

✅ 完全本地运行 — 所有数据处理在浏览器完成，无服务器上传

✨ 核心特性

• 双视口对比: 左侧显示原始轨迹，右侧显示编辑结果，相机同步
• 轨迹编辑: 基于残差的关键帧系统，支持关节和基体编辑
• 工程保存/加载: 保存完整工程状态（URDF、轨迹、关键帧、编辑历史）
• 自动保存: Cookie + IndexedDB 混合存储，自动保存工作状态
• 曲线编辑器: 可视化关节和基体随时间的变化曲线，支持贝塞尔插值
• 动力学可视化: 实时显示重心位置和支撑多边形投影
• 坐标轴指示器: 右下角3D指示器，点击快速切换正交视角
• URDF 解析: 自动加载文件夹中的 URDF 和 mesh 文件
• 多语言支持: 中文/英文界面切换

💾 自动保存机制

应用采用智能分层存储策略：

• localStorage (5MB): 存储轨迹、关键帧、UI状态和小型配置文件（<50KB）
• IndexedDB (50MB+): 存储大型 mesh 文件（如 .stl, .dae）
• 自动增量保存: 仅在 URDF 变化时完整保存，否则仅保存轨迹和关键帧
• 授权管理: 启用/禁用自动保存时同步清理所有存储

启用自动保存后，刷新页面将自动恢复上次编辑状态。

快速开始

npm install           # 安装依赖
npm run dev           # 启动开发服务器
npm run build         # 生产构建

使用说明

基本流程

1. 加载 URDF: 选择包含 URDF 和 mesh 文件的文件夹
2. 加载轨迹: 加载 unitree CSV（base xyz + 四元数 xyzw + 关节弧度）或 seed CSV（Frame + cm/degree），内部会自动转换为 unitree 数据
3. 编辑关键帧: 点击自由度名称显示曲线，调整参数后添加关键帧（Shift+点击多选曲线）
4. 保存工程: 保存完整的编辑状态（支持加载恢复）
5. 导出轨迹: 选择 unitree/seed 格式和导出 FPS 后导出融合后的 CSV 轨迹；FPS 不同时会自动插值重采样

工程管理

• 保存工程: 导出包含 URDF、轨迹、关键帧、编辑历史的工程文件
• 加载工程: 恢复已保存的完整编辑状态
• 增量编辑: 基于残差系统，仅存储修改部分

动力学可视化

• 重心显示: 实时计算并显示机器人重心位置
• 支撑多边形: 显示底面接触点构成的凸包投影
• 稳定性指示: 直观判断当前姿态的静态稳定性

快捷功能

• 平移对齐: 基座控制中的"平移对齐"按钮可自动调整XYZ，使编辑后机器人的最低点与原始轨迹对齐
• 坐标轴指示器: 右下角的3D轴指示器，点击X/Y/Z轴可快速切换到对应的正交视角

技术栈

• Vite: 前端构建工具
• Three.js: 3D 图形渲染
• urdf-loader: URDF 解析
• 原生 JavaScript: 无框架依赖

项目结构

src/
├── main.js              # 应用主入口（双视口渲染）
├── urdfLoader.js        # URDF 加载和解析
├── trajectoryManager.js # 轨迹和关键帧管理
├── trajectoryFormatConverter.js # unitree/seed CSV 格式转换
├── jointController.js   # 关节控制 UI
├── baseController.js    # 基体控制 UI（含平移对齐）
├── curveEditor.js       # 曲线编辑器
├── comVisualizer.js     # 重心和支撑多边形可视化
├── axisGizmo.js         # 坐标轴指示器
├── timelineController.js # 时间轴控制
├── cookieManager.js     # 自动保存管理（localStorage）
├── indexedDBManager.js  # 大文件存储（IndexedDB）
├── themeManager.js      # 主题管理
└── i18n.js              # 多语言支持

├── axisGizmo.js # 坐标轴指示器 ├── timelineController.js # 时间轴控制 └── i18n.js # 国际化（中文/英文）

## License

MIT