Controlling model animations independent of Cesium timeline

Hello Everyone,

If you are like me and have been working with Cesium to render real-time or simulation-based data as opposed to pre-configured scenarios/data via the Cesium timeline, you may have run into issues when it comes to controlling animations. Currently the only suggested mechanism to control animations independently of the timeline is to manipulate ModelGraphics.nodeTransformations which can be somewhat painful and time-consuming. I recently wrote a custom animation player to solve this issue and wanted to share it with the community.

If you would like to try out the system it can be found at

I would appreciate any thoughts or feedback on the system including suggestions on contributing it to the Cesium codebase in the future if enough folks find it useful!

This is really awesome! This might make a very valuable contribution.

I think it’d be really cool if you can put together a small example that uses it on Glitch. That way it’d be easy to share with the team/show how it works for anyone curious about using it. I’ve got a Cesium template on Glitch here:

That you can fork/remix. This includes Cesium in the HTML from a CDN but you could just install in the package.json if that’s how your development environment/this library is setup.

This way you can host a sample glb on Glitch as well so it’s all self contained.

I will work on getting a project set up as soon as possible. In the meantime I have one small question in how Cesium handles nodes from glTF. If a node does not have a name what does Cesium use as the name? Or does it simply not map a name for nodeTransformationss. I was trying to use this model as an example. It animates in Cesium the standard way, but there are no named nodes in the file so I do not know what Cesium expects for nodeTransformation names.

I believe if the glTF nodes don’t have names, then you can’t edit them using nodeTransformations.

The animation plays out in Cesium because the animation references the node by index, not by name:

Cesium does maintain a model._runtime.nodes in addition to the model._runtime.nodesByName. So there’ll always be a way to reference them by index even if they aren’t name.

Thanks Omar,

That makes sense with what I was experiencing. Perhaps this is another improvement to add to Cesium or at least in the docs for nodeTransformations? I created some sample projects on glitch like you asked.

The first is and demonstrates the animation work. It let’s the client choose any gltf file on their local machine. I did include one gltf with the project and it plays correctly, but it was not rigged for the caveat we discovered previously (local transforms on nodes with rotation keys). I am waiting to get a new test model from our artist but he is pretty busy at the moment. I tried using several cesium models but a lot of them use gltf 1.0 (which currently the animation system does not support) OR they do not have named nodes. Named nodes and conformance to the gltf 2.0 spec are the big requirements currently for the animation system. Still it should serve as a solid framework.

The other project is a simple template for using Cesium, Vue.js, and Webpack. This creates a true web application development environment, rather than relying on just the minified build or light-weight sandcastle-ish apps. Anyways I hope you find this stuff useful and look forward to getting your feedback.

Just a heads up there is a new model now that is rigged/skinned correctly in the Glitch demo under the assets folder. If you see some z-fighting that is ok, some polys are a bit too co-planar. Either way this should give you a model to work with initially.

This is looking pretty awesome! The sample model works. I tried this rigged construction worker model I had laying around, and it seems to only animate the torso?

Here’s what it looks when animation is stopped:

And when playing:

Do know why that might be? This is the model on Sketchfab:

I took a look at your model and the main issue is the gltf format. The readme on my repo states a few caveats with the supported gltf formats: The gltf must be in .glb format with the binary embedded (it does not seem this is the case for the model you shared). The other requirements are that the model is exported according to glTF 2.0 and must have named nodes. I will be addressing the various caveats in future builds but wanted to start with a simple baseline. Let me know if you have more questions!


I converted the model to glb as I assume you did now, and I made a small code change in how scale was being calculated during animation. The model animates now but it is still slightly off. The effect I am seeing is what we discussed previously where nodes that have rotation keys and translation values translate along their own axes rather than the parent’s. Run my project again and you will see the wave animation, and what I am talking about. Has there been any investigation by the team into why this is yet? Cheers - Richard

So I finally got time to scrub the animation player with a variety of models and found a few issues in the original code I had written. I have fixed those now and the player is not as picky / does not make as many assumptions about how the model is set up in the glTF. As mentioned before, I have created a small test-app here to allow people to experiment with their own models Please give it a try and I would love to get any feedback. Thanks!