How the heck do you load in your model with animations?

Questions
1

i have multiple models that load into the sandbox with their animations perfectly fine. but i cannot load them into my own projects.

here is a simple model with animations
https://threejs.org/examples/models/gltf/Soldier.glb

put it in the sandbox, all is good: sandbox. babylonjs. com

but can anyone write the code to load it in and play an animation???
i tried reverse engineering the sandbox, but it’s too minified, idk.

even the playground example of animations fails to find the animations.
https://playground.babylonjs.com/#LL5BIQ#0
just switch to the soldier model. skeleton.getAnimationRanges() goes from an array of stuff to an empty array

i’m using nilooy. github. io /mixamo-animation-combiner/ to generate my models. but that soldier one is provided by threejs. same issues with both

i’ve tried for many hours now, pls help

2

Here is the just basic example with this model - https://playground.babylonjs.com/#AJA5J6#7
For animation there is simple function in the code:
load(x, z, 3)
where the last parameter is the index of animationGroups array
(for example, load(x, z, 1) will make the bot running).
You can tweak this function as you like, and also don’t forget about Documentation - Bones and Skeletons | Babylon.js Documentation

1 Like
3

okay so, that’s great, thanks!!! BUT, loading the model multiple times does actually make multiple network requests, babylon doesn’t cache the load. how to you properly clone the model? it seems extremely complicated to do because the animations don’t copy over

4

Above was just example function how it is possible to use animationGroups.
Here is the example of instancing models (you load it only once) with animations - https://playground.babylonjs.com/#0K8EYN#0

2 Likes
5

doesn’t work with animationGroup style animations. that demo only works with skeleton style animations. which my mixamo animations don’t have.

there’s 2 completely different styles of animations for some reason. (which is why i got stuck for a day unable to find my animations)

6

Here is another example with Mixamo model - https://playground.babylonjs.com/#AHQEIB#17
You may also find some useful information here - Animating Characters | Babylon.js Documentation

And here are more examples with instancing animations - https://playground.babylonjs.com/#CGDR8X#7 and https://www.babylonjs-playground.com/#YBEKDT#3

1 Like
7

none of those examples allow you to clone/instance a mixamo/animationGroups style model ( .glb file )

(except the example where you import the mesh multiple times with multiple network calls). which is what i’m using, and does work.

marking this as solved since you solved the original question and saved my sanity

8

Here is Mixamo GLB Soldier model with 50 animated instances, running - https://playground.babylonjs.com/#AJA5J6#69

2 Likes
9

! that’s pretty close! BUT i need to control player 1 and player 2 animations separately

1 Like
10

Here you are - https://playground.babylonjs.com/#AJA5J6#76

1 Like
11

Note that latest example from @labris does not work in 5.0 because by default the meshes are now instanciated and not cloned when using instantiateModelsToScene. Use the options parameter to for cloning, as in 4.2:

https://playground.babylonjs.com/#AJA5J6#77

3 Likes
12

good stuff. now we’re gaming

1 Like
13

this seems surprisingly slow. 100 models in the scene kills the fps. even with animations disabled. i know JS is slow, but where are the resources going? my GPU is chillin. youtube uses more of my gpu than this playground yet it’s crawling https://playground.babylonjs.com/#AJA5J6#79

14

If you need better FPS for 100 models - use instances like here https://playground.babylonjs.com/#AJA5J6#80 (but they will have the same animation in this case).
There are other ways to optimize performance too.

16

Seems that SSR reply should go there - How to implement ReflectionProbes?

17

Yes sorry, thanks for the ping!