Trouble with "Kenney Character Assets" in threejs

Questions
1

Hey.
Am new to three js and was trying to write a small proof of concept game using three js, and saw Kenneys assets and thought they looked quite cool. they also had animations which could be fun to implement in three js, or so i thought.

I’m having trouble with getting the animations to play.
How it works is that there’s one FBX for the model, and one FBX for every animation.
I’ve tried the FBX loader and it loads and looks correct and such, the model renders in it default pose, i can put the material on it so far so good, however when i try to play animation nothing simply happens.

Has anyone tried these models with three js before and can point me into the correct direction?

code looks something like:

    const anim = this.assetLoader.get<any>('./resources/animations/idle.fbx');
    const mesh = this.assetLoader.get<Mesh>('./resources/models/characterMedium.fbx');

    console.log(anim, mesh);
    mesh.scale.set(0.01,0.01,0.01);
    
    mesh.traverse((child) => {
      if((child as any).isMesh) {
        const m = child as Mesh;
        m.material = material;
        m.castShadow = true;
        m.receiveShadow = true;
      }
    });
    const mixer = new AnimationMixer(mesh.children[1]);
    const action = mixer.clipAction(anim.animations[0]);

and in main loop i do updat ethe mixer, such as:

mixer.update(clock.getDelta());

Thre reason i tried it with children is to map it to the correct node in the heirarchy. i’m not sure if this is correct? but it feels like it makes sense…

2

Some of Kenney’s assets are available in glTF format. If you have that, I would suggest using it instead.

I tried importing the sample (https://kenney.nl/assets/animated-characters) model and animation into Blender as FBX, but it doesn’t look correct there. Exporting it out as glTF looks the same as in Blender, but (like in Blender) not quite right. If the original Blender files are included with the full model package, you may have better luck exporting from that.

Since the FBX files do not work in Blender, I’m not very optimistic that they’ll work in three.js even if you get the code right. I think there are also several problems in the code you shared above, but it is hard to debug that without the exact models.

1 Like
3

There is an FBX2glTF converter, but unfortunately it can’t convert models and animations that are in separate FBX files: https://github.com/facebookincubator/FBX2glTF/issues/75.

4

Yeah i’m not sure if it’s 100% correct anymore, i did play around a bit while debugging and looking at the heirarchy trying to see if i could make sense with it and getting it to work but no dice.

Probably something wrong with models then, thank you for checking in blender :slight_smile: Send a support query to Kenney and see if they had any idea or plan to maybe fix it but won’t get my hopes up. will probably see if i can find some other models or try to do one myself and see if i can gt that to work properly. thank you for taking your time!

5

An update if anyone tries the same, got in touch with Kenney and he suggested that i exported it from the blender (which is included in the paid version), and got it working there.

Also one issue i had was that i overwrote the material without setting the skinning property on the material which caused the animations not to play. So now i got it all working!

Thank you @donmccurdy, your small verifications put me in the right direction.

1 Like