起因：最近想做模型的动画，结果上网查资料，看到网上好多对于模型控制的文章都有限制。决定还是自己研究下。欢迎大家一起探讨，评论留言。
效果
火箭
全部代码在最后
起步
模型控制，第一步当然是需要一个合适的模型，去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.Cartesian3
hpRoll,//姿态
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) return
if (autoDirection && activeIndex > 0 && !showPath[activeIndex - 1].equals(showPath[activeIndex])) { //判断前后两个点是否一样，不一样就调整姿态
const heading = Helper.getHeading(
showPath[activeIndex - 1],
showPath[activeIndex],
);
if (heading) hpRoll.heading = heading
const 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 } = controller
let num = initVal
let stopFrame: number
const max = maxVal || 1
const min = minVal || -99999
const duration = step || 0.1
const render = () => {
num += duration
rocketPrimitive.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)
}
})
剩下的都是重复的操作，以及反复调试修改达到最佳
比如火焰喷射要有真实感火箭转向时 喷射头偏转，等等
>