[HELP] FBXLoader SkinnedMesh does not scale with the model?

Questions
, ,
1

Problem URL: https://viniciusfxavier.github.io/threejs/learning-3-test/dist/index.html
Source Code: https://github.com/ViniciusFXavier/threejs/blob/e5605428da908a1c1534c7f93af96c09de90f436/learning-3-test/src/index.ts#L33

If I scale down my model below 1 the animation breaks:
This break the animation -> object.scale.multiplyScalar(0.1);

Using object.scale.multiplyScalar to change model size below 1 break the animation.

object.scale.multiplyScalar(0.1); // Problem

It works -> object.scale.multiplyScalar(1);

 const loader = new FBXLoader().setPath('https://viniciusfxavier.github.io/threejs/learning-3-test/src/models/');
  loader.load('SillyDancing.fbx', (object: any) => {
    object.scale.multiplyScalar(0.1); // Problem

    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);

    var action = object.mixer.clipAction(object.animations[0]);
    action.play();

    object.traverse((child: any) => {
      if (child.type === 'SkinnedMesh') {
        if (child.name !== 'Character_Dummy_Male_01') {
          child.visible = false;
        }
        child.material = new THREE.MeshLambertMaterial({ color: 0xdddddd, skinning: true });
      }
    });

    const skeletonHelper = new THREE.SkeletonHelper(object);
    skeletonHelper.visible = true;
    scene.add(skeletonHelper);
    scene.add(object);

    render();
  });

Animation from https://www.mixamo.com/#/

  • Name: Silly Dancing
2

Same problem find here: SkinnedMesh scaling
Any help ?

3

I’ve downloaded the skinned mesh with the respective animation from Mixamo and imported the FBX file into the three.js editor. I was able to scale down the mesh but still playback the correct animation. Here is the asset: Silly Dancing.fbx (2.3 MB)

BTW: When importing the FBX file into the editor and selecting the respective root object, the following UI in the menu should appear:

image

Hit play to playback the animation.

4

I have done something very similar, but I didn’t get your problem.
To scale the fbx, I used

object.scale.set(.01, .01, .01);

See my example at https://sbcode.net/threejs/fbx-animation/
You can see the javascript source by pressing the <> button in the view.
screengrab

Edit
Actually, what I think your problem might be, is that your imported animation clip contains a VectorKeyframeTrack that affects your models position. In my example, the goofing running has a VectorKeyframeTrack which modified the position, so I delete it from the array after loading it into memory so that the model stays in the same position.

image
image1163×242 16.1 KB

I delete that VectorKeyframeTrack at 0 by using

fbxLoader.load('models/vanguard@goofyrunning.fbx', (object) => {
  object.animations[0].tracks.shift();
  ...