# Dynamically apply FBX animation to model

**URL:** <https://discourse.threejs.org/t/dynamically-apply-fbx-animation-to-model/35737>\
**Category:** Questions\
**Tags:** animation\
**Created:** [March 9, 2022, 2:10pm UTC](https://discourse.threejs.org/t/dynamically-apply-fbx-animation-to-model/35737 "2022-03-09T14:10:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dmitry-Romanchuk-Unilimes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dmitry-romanchuk-unilimes/32/24846_2.png) [@Dmitry-Romanchuk-Unilimes](https://discourse.threejs.org/u/Dmitry-Romanchuk-Unilimes)\
**Post date:** [March 9, 2022, 2:10pm UTC](https://discourse.threejs.org/t/dynamically-apply-fbx-animation-to-model/35737/1 "2022-03-09T14:10:09Z")

</div>

Hello guys.  
I have FBX model and FBX animation loaded dynamically.

How to apply animation to model?

Animation object is a THREE.Group object with 1 children - THREE.Bone. I guess i have to add that bone to model, but dunno how to do that correcly. And also i tried to convert animation object to AnimationClip and animation started playing, but not for whole model (video).

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/e/6e1b6e2b2168ac9d4a16767ca6206942dfabaa06.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/e/6e1b6e2b2168ac9d4a16767ca6206942dfabaa06.mp4)

Thank you

---

<div class="post-metadata">

**Author:** ![Dmitry-Romanchuk-Unilimes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dmitry-romanchuk-unilimes/32/24846_2.png) [@Dmitry-Romanchuk-Unilimes](https://discourse.threejs.org/u/Dmitry-Romanchuk-Unilimes)\
**Post date:** [March 9, 2022, 2:17pm UTC](https://discourse.threejs.org/t/dynamically-apply-fbx-animation-to-model/35737/2 "2022-03-09T14:17:42Z")

</div>

I have an update.  
I used skeleton helper for model and added to its bones 1 bone from animation object.  
So now skeleton animated correctly, but not the model.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/5/456cb2ae4f3b34674e96bbc3954ca21f4e66e659.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/5/456cb2ae4f3b34674e96bbc3954ca21f4e66e659.mp4)

How to apply that skeleton for model?

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [March 10, 2022, 1:06am UTC](https://discourse.threejs.org/t/dynamically-apply-fbx-animation-to-model/35737/3 "2022-03-10T01:06:41Z")

</div>

```javascript
_LoadModels() {
      const loader = new FBXLoader();
      loader.setPath('./resources/guard/');
      loader.load('guard.fbx', (fbx) => {
        this._target = fbx;
        this._target.scale.setScalar(0.038);
        this._params.scene.add(this._target);
  this._target.name = 'player';
        this._bones = {};

        for (let b of this._target.children[1].skeleton.bones) {
          this._bones[b.name] = b;
        }

        this._target.traverse(c => {
          c.castShadow = true;
          c.receiveShadow = true;
          if (c.material && c.material.map) {
            c.material.map.encoding = THREE.sRGBEncoding;
          }
        });

        this.Broadcast({
            topic: 'load.character',
            model: this._target,
            bones: this._bones,
        });

        this._mixer = new THREE.AnimationMixer(this._target);

        const _OnLoad = (animName, anim) => {
          const clip = anim.animations[0];
          const action = this._mixer.clipAction(clip);
    
          this._animations[animName] = {
            clip: clip,
            action: action,
          };
        };

        this._manager = new THREE.LoadingManager();
        this._manager.onLoad = () => {
          this._stateMachine.SetState('idle');
        };
  
        const loader = new FBXLoader(this._manager);
        loader.setPath('./resources/guard/');
        loader.load('Sword And Shield Idle.fbx', (a) => { _OnLoad('idle', a); });
        loader.load('Sword And Shield Run.fbx', (a) => { _OnLoad('run', a); });
        loader.load('Sword And Shield Walk.fbx', (a) => { _OnLoad('walk', a); });
        loader.load('Sword And Shield Slash.fbx', (a) => { _OnLoad('attack', a); });
        loader.load('Sword And Shield Death.fbx', (a) => { _OnLoad('death', a); });
      });
    }

```