How to make multiple meshs play different animations

Questions
,
1

Hello friends:
I have a .glb file with animations.
It has 4 animations: ‘Walk, Sitdown, Idle, Standup’.
I cloned multiple model files in the scene,
hoping that each would play a different animation. Do you have any ideas?

Such as making character 1 walk、 Character 2 sitdown、 Character 3 idle at the same time.

this is the playground link:

2

You need to clone animationGroups too and retarget them to corresponding nodes.
Here is the example how simple it could be with the AssetContainer and instantiateModelsToScene function - https://playground.babylonjs.com/#AJA5J6#184

3

thank you sir,
and I have another problem:
How to get from the Mesh what are the corresponding animations?
I need to get the model first ，and then play the animation of the name in the model。

4

There are many ways of doing this, but one of them can be simply to save on the model the associated information of the animationGroups: animating-clones-from-glb | Babylon.js Playground (babylonjs.com)

1 Like
5

thank you, * I’ll give it a try。

6

hey brothers,
I tried a new approach to clone multiple meshs to play different animations.
like this:

private characterMap: Map<string, any> = new Map();
...
 async getCharacter(url: string) {
    return new Promise<any>((resolve: any, reject: any) => {
      if (this.characterMap.has(url)) {
        const origin = this.characterMap.get(url);
        const mesh = origin.clone()
        mesh.animations = this.cloneAnimations( origin.animations);
        resolve(mesh);
      } else {
        BABYLON.SceneLoader.ImportMesh('', '', url, undefined, (meshes: any[], particleSystems: any[], skeletons: any[], animationGroups: any[], transformNodes: any[], geometries: any[], lights: any[]) => {
          let origin = meshes[0] as BABYLON.Mesh;
          origin.animations = animationGroups;
          origin.setEnabled(false);
          this.modelMap.set(url, origin);
          const mesh = origin.clone();
          resolve(mesh);
        }, null, (err) => {
          console.log("has error: " + err)
          reject(err);
        });
      }
    });
  }
  private cloneAnimations(groups: BABYLON.AnimationGroup[]) {
    let temp = [];
    for (let i = 0; i < groups.length; i++) {
      const a = groups[i] as BABYLON.AnimationGroup;
      const b = a.clone(a.name+"_"+Tool.randomStr(6));
      temp.push(b)
    }
    return temp;
  }

and I used the code like this way:

image
image1274×972 105 KB

1 Like
7

It’s easier to us to follow your code if you provide a Playground repro :slight_smile: