Replacing the skeleton in a GLTF rigged mesh with one from a different file

Questions
, ,
1

I am looking for a way to replace the skeleton in a skinned mesh that I load from a GLTF file (representing an article of clothing) with the skeleton in the GLTF file I have already loaded, that represents a body. The two skeletons are the same - one is a deformed copy of the other.

I have been experimenting with a couple of approaches without much success - can anyone point me to the right area to look at?

For example, I iterate over the “source model” and find the skeleton. Then I iterate over the “destination model” and when I find its’ skeleton, I replace it with the one I found. Has no discernible effect but maybe I am missing one of the xxxNeedsUpdate flags.

(edited for example of what I have tried)

2

this may help

_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); });
      });
    }
3

I think you’re suggesting I copy over the bones as well as the skeleton? I thought I had tried that but I’ll make sure I was doing it properly.

Thank you.

4

No discernible difference after copying over the bones like you proposed - I didn’t seen a flag to indicate some internal updates required but thing feels like the place where one might be necessary given what else I know about three.js.

Nothing like that in your code - it works for you as is I take it?