FBX Model Scaling(?) bone alignment issue

[Mas0490]

Hey,

I am having an issue with the fbx loader and some models that I downloaded off the web…

as best I can tell, it is something to do with the scaling of the mesh against the bones that they are rigged with for animations … I imported some of the models that I’m having issues with into Blender and rescaled the mesh and bones, then after doing this for 3 models in a row I realized something cannot be right… so I downloaded 3dsMax, and the model rendered like this

but when its loaded into threejs it looks like this …

this is the model in the photo that I am having issues with …
ShineGreymon Burst Mode.zip (3.2 MB)

and this is the code that I am using… I would be really grateful if someone could tell me the fix for the models, because there are over 300 of them and I dont think manually scaling all of them is the correct answer …

function LoadAnimatedModel(name) {
console.log(“LoadAnimatedModel”);
var loader = new FBXLoader()
.load(DigimonObjects[name].FilePath, function (object) {
console.table(object);
console.log(“object ^^^”);
// get required animation

        console.log(object.animations)
        // console.log("Available Animation ^^^")

        for (var animateKey in object.animations) {
            if (object.animations[animateKey].name.toLowerCase().indexOf("idle") > -1) { break; }
        }

        mixer = new THREE.AnimationMixer(object);
        var action = mixer.clipAction(object.animations[animateKey]);
        action.play();

        object.traverse(function (child) {
            if (child.isMesh) {
                //add shadows
                child.castShadow = true;
                child.receiveShadow = true;
                //make model solid
                child.material.transparent = false;
            }
        });

        object.scale.set(100, 100, 100);
        object.position.set(0, 0, 0);
        // object.name = name;

        digimonObject = object;

        scene.add(digimonObject);
    });

}

also as a side question, I would be interested is anyone has any ideas on the fire effect on his wings, I have set “material.transparent = false” with obviously means that the fire is now solid…not the desired outcome

Thanks in advanced!

[looeee]

Possible related to this issue:

FBXLoader not working with many skeleton animations (e.g., from Mixamo.com)

Probably the quickest solution is to convert them to glTF. Can you try using FBX2GLTF and then try loading the converted file here?

https://gltf-viewer.donmccurdy.com/

[Mas0490]

I’m amazed by your quick reply thank you so much!

I didnt quite understand how to get the FBX2GLTF to work so I ended up just converting it online for now, just to test the theory … which seems to work when looking at the gltf-viewer

but when I use this code to import the model into threejs I’m getting heaps of errors…

I updated my code as follows:

function LoadAnimatedModel(name) {
var loader = new GLTFLoader()
.load(DigimonObjects[name].FilePath, function (object) {

        console.table(object);
       console.log("object ^^^");
        // get required animation
        console.log(object.animations)
        // console.log("Available Animation ^^^")

        for (var animateKey in object.animations) {
            if (object.animations[animateKey].name.toLowerCase().indexOf("idle") > -1) { break; }
        }

        mixer = new THREE.AnimationMixer(object);
        var action = mixer.clipAction(object.animations[animateKey]);
        action.play();

        object.traverse(function (child) {
            if (child.isMesh) {
                //add shadows
                child.castShadow = true;
                child.receiveShadow = true;

                //make model solid
               child.material.transparent = false;
            }

        });

        object.scale.set(100, 100, 100);
        object.position.set(0, 0, 0);
        // object.name = name;

        digimonObject = object;
        scene.add(digimonObject);
    });

}
chr776.glb (2.1 MB)

I have noticed that the very end of the error list it says

I’m using this: import { GLTFLoader } from ‘…/three/examples/jsm/loaders/GLTFLoader.js’;

is there a extra piece of code I need to add/remove?

[Mas0490]

Sorry, all good now!

I looked through the objects data structure and saw that is is slightly different to fbx

so I played around with my code till it looked more like this

function LoadAnimatedModel(name) {

var loader = new GLTFLoader();

loader.load(DigimonObjects[name].FilePath, function (object) {

    for (var animateKey in object.animations) {

        if (object.animations[animateKey].name.toLowerCase().indexOf("idle") > -1) { break; }

    }

    mixer = new THREE.AnimationMixer(object.scene);

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

    action.play();

    object.scene.traverse(function (child) {

        if (child.isMesh) {

            //add shadows

            child.castShadow = true;

            child.receiveShadow = true;

        }

    });

    object.scene.scale.set(10000, 10000, 10000);

    object.scene.position.set(0, 0, 0);

    console.log(object.scene)

    digimonObject = object;

    scene.add(object.scene);

});

}

which seems to be working now, thank you for all your help!

[looeee]

When I convert the model with FBX2GLTF I get this warning:

node /RootNode/prefab uses unsupported transform inheritance type 'eInheritRrSs'. 

This is the same issue that I linked above. I think this is not possible to support in three.js, at least with reasonable effort. Mas0490 do you have any idea what program was used to create the FBX files?

The converted model looks fairly correct in the viewer.

However, there’s a whole lot of errors related to NaN values.

One other issue is that there are ten or so animations with this model, but it seems like one “spin” animation is playing constantly when I try to play the others so it’s hard to view them. This might be an issue in the viewer. @donmccurdy if you have some spare time would you be able to check out this model?

chr776.glb (2.6 MB)

[looeee]

@Mas0490

Sorry, all good now!

Good that it’s working! But checking out your converted model, you have a whopping 1486 errors in the viewer! The textures are gone too. The one I converted with FBX2GLTF has 86 so that’s a little better, and textures too.

You can download the latest FBX2GLTF here. Then drop the file in the same folder as your FBX file, open a command prompt and run this command (on windows):

.\FBX2glTF-windows-x64.exe -i .\chr776.fbx -b

For mac download the FBX2glTF-darwin-x64 instead of FBX2glTF-windows-x64.exe.

[Mas0490]

I’m not 100% sure but based on a comment made on the site I got the models from about the fact the .fbx files are all ASCII;

“This is the known issue for Unity Studio as it can only exports the models in ASCII fbx file format.”

I’m guessing Unity Studio? … but I also noticed in the viewer the spin animation issue, I worked out that if you tick and un-tick the first animation it stops playing, and then you can view the other animations… I dont experience any issue like it in threejs, so I think its something to do with the viewer?

[Mas0490]

yeah that was my bad with the online converter that I was using, I didnt zip the texture files in with .fbx file, thus losing the that

your the best, thank you for the how to on the converter, that worked perfectly…

I am curious though, it seems to not like the transparent fire on his wings, sword etc… is there extra parameters that I need/could add to get around this?

[looeee]

@Mas0490

it seems to not like the transparent fire on his wings, sword etc… is there extra parameters that I need/could add to get around this?

You can try switching to alpha test:

model.traverse((node) => {
  if (node.isMesh) {
    node.material.transparent = false;
    node.material.alphaTest = 0.5;
  }
});

See this issue for more discussion:

FBXLoader: Partial transparent maps doesn't work

the online converter that I was using

Which one did you use?

[donmccurdy]

@looeee

it seems like one “spin” animation is playing constantly when I try to play the others so it’s hard to view them. This might be an issue in the viewer.

I think the cause is glTF-Viewer#194, when multiple animations have the same name the UI has some issues. If you first enable then disable the first attack01 animation, it behaves normally after that.

[looeee]

@Mas0490

“This is the known issue for Unity Studio as it can only exports the models in ASCII fbx file format.”

That shouldn’t cause any problems. The actual FBX data is the same in binary or ASCII format, it’s just that ASCII file size will be much bigger.

@donmccurdy

I think the cause is glTF-Viewer#194,

Got it, thanks for checking. Will comment further there.

[Mas0490]

@looeee

You can try switching to alpha test:

I tried using alpha test, it wasn’t until I set it to “child.material.alphaTest = 1;” that it removed some of the black lines around the wings, but seemed to completely ignore the sword etc still

so I ended up just, doing this, which seems to work for the most part

if ([“sword_f_0”, “shield_f_0”, “wing_l_f_0”, “wing_r_f_0”, “tail_f_2_0”, “tail_f_3_0”, “tail_f_4_0”, “tail_f_lig_0”].indexOf(child.name) > -1) {
child.visible = false;
}
before:

after:

it would be cool to figure out how to make the fire effects more like the game though… as seen in this video https://youtu.be/KX5iJ27EpH0?t=53

but oddly setting
child.material.transparent = true
on any of the sword components or even the entire model

object.scene.traverse(function (child) {
if (child.isMesh) {
child.material.transparent = true
}

didint seem to have an effect…