1-DAE简介

DAE全称 Digital Asset Exchange file，用于交互式3D应用程序间的数据传递。

DAE是基于COLLADA的 XML 文件。

COLLADA 是一种用于图形软件程序间，传递数字模型的开放式XML方案。

COLLADA 已被国际标准化组织采纳，定为公开可用的规范。

COLLADA 中定义了 Kinematics 运动学元素，通过Kinematics 可以在建模的时候就定义好模型的运动方式，比如旋转轴、旋转范围、模型类型等，这样我们可以在导入模型之后，更快捷的制作模型动画。

接下来我们要说的便是如何通过Kinematics 制作机械臂的运动。

效果演示：https://www.yxyy.name/examples/web3d/robot/

2-vue3+three.js 实现机械臂运动

1.建立vue 项目。我选择vue并没有什么其它目的，你若喜欢，用react也行。

接下来按照提示，安装依赖，运行项目即可。

2.安装three.js

package.json文件如下：

3.在App.vue 中导入dae模型，制作补间动画。

这是整体代码，接下来咱们详细解释一下。

3-代码解析

1.使用three.js 的ColladaLoader 可以加载dae模型。

new ColladaLoader().loadAsync()返回的是Promise 对象。

2.在onMounted中，我们可以用robot.then() 方法接收模型。

我用traverse()方法遍历出了所有的Mesh对象，然后用给其添加了一个金属效果的MeshStandardMaterial材质。

因为此模型中没有法线数据，所有我用geometry.computeVertexNormals() 自动计算了法线。

dae模型中会附带一个kinematics 运动学对象，其中带有机械关节数据，以及获取和设置机械关节的方法。

下面是我打印出的kinematics对象：

• setJointValue('joint_1', 90) 设置关节运动数据

• getJointValue('joint_1') 获取关节运动数据

• joints 关节集合，joint_1、joint_2是关节名。

• axis 绕哪个轴旋转

• limits:{min, max} 运动范围

• static 是否是静态物体

关于DAE中的kinematics 的基本操作原理就这么简单。

3.制作机械臂的补间动画。

补间动画就是基于一个时间插值inter，在两个旋转状态间求补间值。

• 补间时间的长度是随机生成的：

getTimeLen()会返回1s-2s的随机时间。

• 旋转目标值是在相应关节的旋转范围内随机生成的。

rotate1是关节旋转的初始状态。

rotate2 是关节旋转的旋转目标值。

• 补间插值inter=(当前时间-补间开始时间)/补间时间长度

其余的都很简单，我就不再多说，大家可以参考之前贴出的完整代码。

参考链接

DAE：https://docs.fileformat.com/3d/dae/

COLLADA：https://www.khronos.org/files/collada_spec_1_5.pdf