基于MDH参数在Three.js中绘制URDF机械臂模型

在机器人仿真领域，MATLAB Robotics Toolbox 可以基于 MDH 参数渲染机械臂模型，即使 URDF 缺少几何文件，也能用圆柱替代。产品也要实现类似功能，我们基于 Three.js 解析 URDF，并利用 MDH 参数动态生成连杆，确保任何基于 MDH 建模的机械臂都能正确可视化。本文将介绍实现过程，提供一种灵活的 Web 端机器人渲染方案。

URDF 解析与加载

在本项目中，我们使用 URDF-Loader 解析 URDF 文件。github.com/gkjohnson/u...

使用非常简单直接导入 urdf-loader创建实例调用load方法即可。

js 复制代码

import URDFLoader from 'urdf-loader';  

const loader = new URDFLoader(); 
loader.load('/model/robot.urdf', (robot) => { 
    robot.rotation.x = -Math.PI / 2;  //urdf是z轴向上，threejs是y轴向上所以需要旋转90度
    scene.add(robot);
});

先来看看有模型文件的urdf加载出来的效果。

MDH介绍

可以看看这篇文章blog.csdn.net/weixin_5245...

简单理解为使用mdh的4个参数a、alpha、d、offset从原点开始先沿着x轴平移a，然后再绕x轴旋转alpha，再沿着z轴平移d，最后绕z轴旋转offset，如此循环就可以生成一个描述机械臂的urdf文件。生成urdf文件的部分我们公司是由算法的同学来做的，但是基本原理要清楚画图要用。
下面用到的mdh都是这组数据：

matlab

先使用matlab的机器人查看工具，下面是使用mdh建模生成的机械臂。我们要做的就是使用threejs实现相同的效果。

渲染urdf

因为urdf是mdh生成的，缺少mesh文件，所以通过urdf-loader只能把urdf文件解析成一个threejs的object对象，但看不到模型实体。

查看源码

查看urdf-loader源码其实可以找到，他在渲染时预留了几种几何体，优先是mesh，还有box、sphere、cylinder。

先尝试把urdf文件中的mesh改成cylinder，这样确实也可以渲染出来关节，但是缺少连杆和matlab还是有些差别,所以这种方式不可取。

可以从上图看到，其实解析出来的模型对象，机械臂的关节位置是对的，只是缺少连杆的模型。这里的难点就是怎么把连杆画出来

再来回顾一下mdh建模的过程，它是从原点开始先沿着x轴平移a，再绕x轴旋转alpha。那这个平移的部分其实就是连杆。同样的沿着z轴平移d，再绕z轴旋转offset平移的部分也是连杆。位移的过程有两步a和d，所以画连杆的时候也应该分成两个圆柱。
a的起始点是当前关节，所以a就应该添加到当前关节里。d的终点就是下一个关节，所以d添加到下一个关节。 根据这个思路画圆柱基本就没问题了。最终效果：黄色连杆、灰色关节

js 复制代码

    for (let i = 0; i < links.length; i++) {
            const mdhItem = mdh.list[i];
            if (!mdhItem) {
              continue;
            }
            const link = links[i];
            const a = parseFloat(mdhItem.a);
            const d = parseFloat(mdhItem.d);
            const alpha = parseFloat(mdhItem.alpha);
            if (a) {
              const length = Math.abs(a);
              let cylinderA = createCapsuleGeometry(0.03, length, 0xf45e1c);
              cylinderA.geometry.translate(0, length / 2, 0);
              cylinderA.rotation.z = (a > 0 ? -Math.PI : Math.PI) / 2;   //a的圆柱要朝向x轴
              cylinderA.rotation.x += alpha;
              link.children[0].add(cylinderA);
            }
            if (d) {
              const length = Math.abs(d);
              let cylinderD = createCylinderGeometry(0.03, length, 0xf45e1c);
              cylinderD.geometry.translate(0, length / 2, 0);
              cylinderD.rotation.x = -Math.PI / 2;   //d的圆柱要朝向z轴
              if (d < 0) {
                cylinderD.rotation.z = Math.PI;
              }
              link.children[1].add(cylinderD);
            }
          }