源码分享：四旋翼无人机飞行动画免费分享

无人机动画

前段时间想实现一个机关铁鸢（四旋翼无人机）飞行动画与无人机飞控及可视化大屏交互，搜遍网上秘籍，仅发现了一个侠客写的案例，结果那厮竟要九十八枚铜钱。

一气之下闭关半天喝光二斤枸杞茶，终于参透天机学会了炼器之法（自己制作无人机模型），以键盘为剑，代码为符基于乾坤星图术（Cesium）实现了一个无人机飞行动画效果。

今广撒英雄帖，免费分享给大家！

可谓“宁赠天下码农三斗米，不喂奸商半碗茶！”

代码实现可通过Cesium、UE5、three.js等库实现，本文基于Cesium实现如下：

核心代码

加载完模型后找到旋翼节点，分别旋转旋翼节点即可实现飞行动画。

加载模型并注册模型加载完成事件

然后启动requestAnimationFrame动画

graphic.on(“load”,(gltf) => {
    airfoilModel=gltf;
    console.log(airfoilModel);
    demoData.animate();
})

在 animate动画方法中循环gltf模型，找到四个旋翼，可以根据电机等参数实现无人机旋转动画，本文旋转参数固定：

//核心代码
let nodes = gltf.model._nodesByName;
for (const key in nodes) {
//4个旋翼
if (["fly1","fly2","fly3","fly4"].includes(key)) {
const model = nodes[key];
// 获取模型的中心位置
const center = Cesium.Matrix4.getTranslation(model.matrix, new Cesium.Cartesian3());

// 创建绕 Y 轴旋转的矩阵
var rotationAngle = Cesium.Math.toRadians(10);
if(["fly1","fly4"].includes(key)){
        rotationAngle = Cesium.Math.toRadians(-10);
}
const rotationMatrix = Cesium.Matrix3.fromRotationY(rotationAngle);

// 创建一个平移矩阵，将模型移到原点
const translationToOrigin = Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.negate(center, new Cesium.Cartesian3()));

// 将物体移到原点
const moveToOriginMatrix = Cesium.Matrix4.multiply(translationToOrigin, model.matrix, new Cesium.Matrix4());

// 在原点应用旋转
const rotatedMatrix = Cesium.Matrix4.multiply(Cesium.Matrix4.fromRotationTranslation(rotationMatrix), moveToOriginMatrix, new Cesium.Matrix4());

// 创建另一个平移矩阵，将模型移回原中心位置
const translationBack = Cesium.Matrix4.fromTranslation(center);

// 将模型平移回去，得到最终的矩阵
      model.matrix = Cesium.Matrix4.multiply(translationBack, rotatedMatrix, new Cesium.Matrix4());
}