[SOLVED] Load GLB Animation new Anim System

Help & Support
1

Hey everyone!

Been excited to use the new Anim System and the import hirarchy! Really cool so far!

With the old Animation System I was able to use playcanvas-anim.js and playcanvas-gltf.js to load a GLB animation at runtime and then add it as a new animation clip so I could load and play morph animations. Now I printed my entity and look at the new Anim component. So far I was not able to get my head around on how to achieve the same thing with the new Anim System, which uses state graphs etc.

Anyone got any clue on how to achieve this ?

The old method was as follows:

 this.app.assets.loadFromUrl(this.gtlfFile.file.url, 'binary', function (err, asset) {
        console.log(asset);
        loadGlb(asset.resource, this.app.graphicsDevice, function (err, res) {

            var animationClips = res.animations;
            console.log(animationClips);
             // Load any animations
            if (animationClips && animationClips.length > 0) {
                this.animationClips = animationClips;
                if (!this.animationEnt.animation) {
                    this.animationEnt.animation = new AnimationComponent();
                }
                var tj = null;
                for (i = 0; i < animationClips.length; i++) {
                    console.log(animationClips[i]);
                    animationClips[i].transferToRoot(this.animationEnt);
                    this.animationEnt.animation.addClip(animationClips[i]);
                    window.tJ = animationClips[i];
                    
                }
                this.animationEnt.animation.curClip = animationClips[0].name;

                console.log(animationClips.length + " animation clips loaded");
            }
  
            this.animationEnt.animation.getCurrentClip().play();
            
        }.bind(this));
    }.bind(this));
2

@Elliott Will the PR that you’ve been working on make this process easier?

3

Yeah the updated AnimComponent#assignAnimation function should work in this instance. You can use it instead of the AnimationComponent#addClip function.

You can see the API changes here:

2 Likes