1-DAE簡介

DAE全稱 Digital Asset Exchange file，用于交互式3D應(yīng)用程序間的數(shù)據(jù)傳遞。

DAE是基于COLLADA的 XML 文件。

COLLADA 是一種用于圖形軟件程序間，傳遞數(shù)字模型的開放式XML方案。

COLLADA 已被國際標準化組織采納，定為公開可用的規(guī)范。

COLLADA 中定義了 Kinematics 運動學元素，通過Kinematics 可以在建模的時候就定義好模型的運動方式，比如旋轉(zhuǎn)軸、旋轉(zhuǎn)范圍、模型類型等，這樣我們可以在導入模型之后，更快捷的制作模型動畫。

接下來我們要說的便是如何通過Kinematics 制作機械臂的運動。

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

2-vue3+three.js 實現(xiàn)機械臂運動

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材質(zhì)。

因為此模型中沒有法線數(shù)據(jù)，所有我用geometry.computeVertexNormals() 自動計算了法線。

dae模型中會附帶一個kinematics 運動學對象，其中帶有機械關(guān)節(jié)數(shù)據(jù)，以及獲取和設(shè)置機械關(guān)節(jié)的方法。

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

• setJointValue('joint_1', 90) 設(shè)置關(guān)節(jié)運動數(shù)據(jù)

• getJointValue('joint_1') 獲取關(guān)節(jié)運動數(shù)據(jù)

• joints 關(guān)節(jié)集合，joint_1、joint_2是關(guān)節(jié)名。

• axis 繞哪個軸旋轉(zhuǎn)

• limits:{min, max} 運動范圍

• static 是否是靜態(tài)物體

關(guān)于DAE中的kinematics 的基本操作原理就這么簡單。

3.制作機械臂的補間動畫。

補間動畫就是基于一個時間插值inter，在兩個旋轉(zhuǎn)狀態(tài)間求補間值。

• 補間時間的長度是隨機生成的：

getTimeLen()會返回1s-2s的隨機時間。

• 旋轉(zhuǎn)目標值是在相應(yīng)關(guān)節(jié)的旋轉(zhuǎn)范圍內(nèi)隨機生成的。

rotate1是關(guān)節(jié)旋轉(zhuǎn)的初始狀態(tài)。

rotate2 是關(guān)節(jié)旋轉(zhuǎn)的旋轉(zhuǎn)目標值。

• 補間插值inter=(當前時間-補間開始時間)/補間時間長度

其余的都很簡單，我就不再多說，大家可以參考之前貼出的完整代碼。

參考鏈接

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

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