起因：最近想做模型的动画，结果上网查资料，看到网上好多对于模型控制的文章都有限制。决定还是自己研究下。欢迎大家一起探讨，评论留言。

效果

火箭

全部代码在最后

起步

• 模型控制，第一步当然是需要一个合适的模型，去cesium官网实例中找到了一个合适的模型，并且还顺带了一些模型操作方法。
  

• 搜索关键字applyArticulations;模型地址；

• 拿到模型迫不及待的想在自己自己的项目中加载出来

• 加载方式有两种entity和Primitive， 我个人更喜欢第二种Primitive方式。

• 对应的参数就不做解释了，文档中都有

let rocketPrimitive: Cesium.Model
let position = Cesium.Cartesian3.fromDegrees(104.200403, 30.396231, 600.0);
const hpRoll = new Cesium.HeadingPitchRoll();
const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator("north", "west");
const rocketPrimitive = viewer.scene.primitives.add(Cesium.Model.fromGltf({url: "https://assets.agi.com/models/launchvehicle.glb",modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position,hpRoll,Cesium.Ellipsoid.WGS84,fixedFrameTransform),minimumPixelSize: 128,}));

模型的组成

const articulations = model.sceneGraph._runtimeArticulations;官方的这段代码我用着报错，文档里面没有。也不知道啥问题

• 直接将加载的模型打印出来看里面具体的结构

发现了nodes，模型里面的关节点,就是模型由哪些部分组成,官网文档中也明确的说了。画红线的那段话翻译出来就是"返回glTF中具有给定名称的节点。这用于修改用户定义动画的节点变换"

模型操作

• 点火

 rocketPrimitive.setArticulationStage( //对应属性改变参数值'SRBFlames Size',1);rocketPrimitive.applyArticulations(); //使得修改的属性生效

• 火箭点火后自然就要移动，添加模型的平滑移动，模型的平滑移动我之前的文章有。
• 原理就是不停的移动模型位置，以及模型的姿态，只要移动的距离足够小看起来就是平滑的。

 Cesium.Transforms.headingPitchRollToFixedFrame(showPath[activeIndex], //当前坐标点Cesium.Cartesian3hpRoll,//姿态Cesium.Ellipsoid.WGS84,fixedFrameTransform,rocketPrimitive.modelMatrix //模型当前的世界矩阵);

• 利用viewer.scene.preUpdate.addEventListener //下一帧渲染前回调

viewer.scene.preUpdate.addEventListener(keepRun)

• keepRun 就是我们移动的函数

const keepRun = (scene: Cesium.Scene, time: number) => {if (activeIndex >= maxIndex) returnif (autoDirection && activeIndex > 0 && !showPath[activeIndex - 1].equals(showPath[activeIndex])) { //判断前后两个点是否一样，不一样就调整姿态const heading = Helper.getHeading(showPath[activeIndex - 1],showPath[activeIndex],);if (heading) hpRoll.heading = headingconst pitch = Helper.getPitch(showPath[activeIndex - 1],showPath[activeIndex])if (pitch) hpRoll.pitch = pitch}Cesium.Transforms.headingPitchRollToFixedFrame(showPath[activeIndex],hpRoll,Cesium.Ellipsoid.WGS84,fixedFrameTransform,rocketPrimitive.modelMatrix);activeIndex += 1
}

• 可以平滑的移动了。

• 当然火焰的生起也应当平滑，控制模型都需要平滑的操作，直接写个函数控制

function modelAnimationController(controller: typeModelAnimationController) {const { type, initVal, maxVal, fn, step, minVal } = controllerlet num = initVallet stopFrame: numberconst max = maxVal || 1const min = minVal || -99999const duration = step || 0.1const render = () => {num += durationrocketPrimitive.setArticulationStage(type,num);rocketPrimitive.applyArticulations();stopFrame = requestAnimationFrame(render)if (num > max || num <= min) {window.cancelAnimationFrame(stopFrame)fn && fn()}}render()
}
modelAnimationController({type: 'SRBFlames Size', initVal: 0, maxVal: 1, step: 0.05, fn: () => {viewer.scene.preUpdate.addEventListener(keepRun)}
})

剩下的都是重复的操作，以及反复调试修改达到最佳

• 比如火焰喷射要有真实感
• 火箭转向时 喷射头偏转，等等