A way to add animations to a model (or animation swap between models)

[vmt86]

Description

So, I have a bunch of glb (originally fbx) files, each is one model with a set of animations. What I want is to be able to use the animations from one file, with the model of another file.
When I was working with threejs (which I had to drop due to errors when importing models) I could load both models, but only put one of them in the scene, then I would store the other model's animations (clips) in a variable and let the user select which one to play. This worked as intended, but as I mentioned, the models would load wrongly.
I tried swapping animations in blender, and exporting the model with the animations swapped into a glb file, which I then loaded in
the online editor
https://modelviewer.dev/editor/
As well as in my project, and everything works fine in both, so I would like to know if there's a way to support doing it programmatically, if it's already there I didn't find it in the docs.

Version

model-viewer: v3.3.0

[elalish]

I think doing it programmatically would be hard. Blender is the right approach for this. Unless your files are very uniform, in which case you might look at modifying the glTF JSON directly (after unpacking the GLB). VSCode has a nice glTF plugin for this, but it's probably still a pain.

[vmt86]

The issue is that I have over 100 of these models, I couldn't possibly generate a glb file for each possible combination. What I want to do, essentially, is to allow a user to select one model, and then select which model to take the animations from.
I'm not entirely sure how models are loaded here, but one idea I had would be to have two model-viewers (probably one hidden), load the second model (the one I wanna take the animations from) on the second model-viewer, which would also load the animations, and then find a way to use those animations on the model loaded on the first viewer.

[vmt86]

To summarise what I said, basically what I would need, to take this approach, is a getter and a setter for the animations.
Load second model -> call getter to retrieve animations (or clips)
Call setter method on first model to replace it's animation set with the new one.
Then I would simply give the user a selector with the new set of animations to choose from.

[vmt86]

So, I guess a getter and setter for animations is out of the question?

[elalish]

Yeah, if you really want to do this at runtime, you'll want three.js. We're a higher-level abstraction that doesn't expose that level of detail. You're welcome to fork us and do the three.js magic directly in our $scene.

[vmt86]

Last time I bother you, hopefully, I'm still not very experience on frontend, how do I access the $scene? I don't remember seeing it in the docs, unless I misremember.

[elalish]

This means you don't want to go this route. I'm not referring to our API, but to forking our project.