[SOLVED] How do you programmatically import and apply animations to models from Mixamo?

Help & Support
1

What’s the best way to achieve this?

1)Do I import my character as a .glb with type container via:

var url = "Character.glb";
app.assets.loadFromUrl(url, "container", function(err, asset) {});

Or as an editor exported .json with type model via:

var url = "Character.json";
app.assets.loadFromUrl(url, "model", function(err, asset) {});

2)Do I download the animation from mixamo with or without skin?

This is what I’ve tried so far. The model is imported but I can’t get the animation to play.

var url = "Character.glb";
app.assets.loadFromUrl(url, "container", function(err, asset) {

    Character = new pc.Entity("Character");
    Character.addComponent("model", {
        type: "asset",
        asset: asset.resource.model,
        castShadows: true
    });

    app.assets.loadFromUrl("IdleWithoutSkin.json", "animation", function(err, asset) {
        Character.addComponent("animation", {
            asset: "mixamo.com",
            speed: 1,
            loop: true
        });
        Character.animation.play("mixamo.com", 0.2);
        console.log("playing");  //I get this in the console but the animation doesn't play.
    });


    Character.setLocalScale(0.018, 0.018, 0.018);
    Character.setLocalPosition(0, -1.8, 0);

    app.root.addChild(Character);
});

I even tried the above code with .json and imported that as type model, but even then I couldn’t get the animation to play.

2

Hi @Gamer_Wael,

I am not at my desk, but do take a look at the Third Person Controller example. It uses a single character model at a T-pose and imports each animation from a separate source FBX file.

I’ve used the same system on my projects, exporting each animation as with the default settings from mixamo and then applying it on the base model. It plays and previews in editor quite ok.

https://playcanvas.com/editor/project/705595

3

Thanks for replying. So looking at the Third Person Controller example, I’ve downloaded the same model and animation, but the problem is I don’t know how to load the animations and make them play. It’s pretty straightforward in the editor, just drag and drop, but I’m doing this using the engine only.

In the editor they reference the animation using its name property. So I think I’m doing something wrong there, since I don’t see any name property.

app.assets.loadFromUrl("IdleWithoutSkin.json", "animation", function(err, asset) {
    Character.addComponent("animation", {
        asset: "mixamo.com",
        speed: 1,
        loop: true
    });
    Character.animation.play("mixamo.com", 0.2);
    console.log("playing");
});

I get the console log, but the animation doesn’t play. I also don’t get any errors.

4

So, the property to set the animations is assets instead of asset and it expects an array. And you pass a reference to the animation assets, not the asset filename (mixamo.com). Check the following example how it’s doing this:


// add animation component to entity
entity.addComponent("animation", {
   assets: [idleAnim, runAnim],
   speed: 1
});
1 Like