Adding Animation to an Avatar, Entity Model From a Separate Model File

CesiumJS
1

Use Case: I am integrating ReadyPlayerMe (https://readyplayer.me/) avatar support into Cesium.js.

ReadyPlayerMe provides an avatar creation service that any application can integrate into their experience. The animations, however, are separate. Generally the animations are imported into the client (usually a game engine) and connected to the structure of a ReadyPlayerMe model. At run-time, the user’s readyplayerme model is downloaded and swapped in.

I want to do this with Cesium.js.

I did not see a supported way to load an animation and add it into a model. So, I started down the path of trying to handle it server side (dynamically pack them together). However, that really sucked for a lot of obvious reasons.

So, I started hacking in my sandcastle. And shockingly I got it to work. You can check it out here:

https://sandcastle.jarxconcepts.com/Apps/Sandcastle/index.html?src=AddAnimationToEntityModel.html&label=All

Use the pull down to have it download and use a separate dance animation model.

  1. I could not find a good way to get the Model Instance from an Entity ModelGraphics. So, I poked at _dataSourceDisplay._defaultDataSource._visualizers._modelHash until I got it. See my findModel function.
  2. I load the glb with the animation and copy its animations into the model. Then I go through all the animation channel nodes and connect them up by name (in my case, the names match exactly; a more generic approach could include some sort of mapping).

For my situation, I can get away with using this method, but if this is a valid use case—I would be down for helping to implement this in some sort of maintainable way.

Thanks for the great product!