源码分享：四旋翼无人机飞行动画免费分享
无人机动画
4月30日 (1)(2)-封面.jpg
前段时间想实现一个机关铁鸢（四旋翼无人机）飞行动画与无人机飞控及可视化大屏交互，搜遍网上秘籍，仅发现了一个侠客写的案例，结果那厮竟要九十八枚铜钱。
一气之下闭关半天喝光二斤枸杞茶，终于参透天机学会了炼器之法（自己制作无人机模型），以键盘为剑，代码为符基于乾坤星图术（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());
}
模型制作
实现无人机飞行动画可以通过使用骨骼动画或者自己通过编码实现，编码实现可以根据IOT传感器数据进行控制，本文采用第二种方式；
模型可以自己制作或者网上下载一些现成的模型进行修改
2b9489a90d79a07d941a9fc67cc9543.png
自己制作模型时机翼可通过阵列布局实现
注意将模型的四个旋翼的原点放到物体中心
blender中：选中旋翼部件 → 物体 → 选择"原点至几何中心"
792e33438cfcd27b154835c0a505534.png
PS：重点事项，模型四旋翼的原点及旋翼与机身分离
关注“Giser星球”回复“无人机动画”免费获取模型及源码
有问题欢迎联系我一起交流学习
Giser星球
