How to add animation to bones and drive it

Questions
,
1

HI Good morning everyone
I have an externally imported model, and I need to add animation to its bones and successfully drive the model. I encountered the following difficulties, but the model did not move with the bones.

The code is as follows:

BABYLON.SceneLoader.ImportMesh(‘’, “https://hyhh-fs.oss-cn-beijing.aliyuncs.com/model/”, “771171084eef407a956bbb08ead02fa6.glb”, scene, (meshes,p,skeletons) => {
meshes.forEach((mesh) => {
var stdMaterial = new BABYLON.StandardMaterial(“stdMaterial”, scene);
mesh.material = stdMaterial
mesh.useVertexColors = false;
if (mesh?.skeleton) {
console.log(mesh.skeleton)
mesh.skeleton.bones.forEach((row) => {
var animation1 = new BABYLON.Animation(“tutoAnimation”, “position.x”, 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keys = ;
keys.push({
frame: 0,
value:new BABYLON.Vector3(0,0,0)
});
keys.push({
frame: 2,
value: new BABYLON.Vector3(5,5,0)
});
animation1.setKeys(keys);
var animationGroup = new BABYLON.AnimationGroup(“my group”);
animationGroup.addTargetedAnimation(animation1, row);
animationGroup.play(true);
})

        }
    });
    scene.createDefaultCamera(true, true, true);
}, undefined, (error) => {
    console.log("error=", error);
});

Thank you all, I need your help

2

When loading a glb file, the transformations must be applied to the transform nodes you find under the root node created by the loader and not on the bones themselves: the bone transformations will be overwritten by the transform node transformations by the engine each frame.

3

BABYLON.SceneLoader.ImportMesh(‘’, “https://hyhh-fs.oss-cn-beijing.aliyuncs.com/model/”, “771171084eef407a956bbb08ead02fa6.glb”, scene, (meshes, p, skeletons) => {
console.log(skeletons)
skeleton = skeletons[0]
skeleton.bones.forEach((row) => {
var animation1 = new BABYLON.Animation(“tutoAnimation”, “position.x”, 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keys = ;
keys.push({
frame: 0,
value: new BABYLON.Vector3(0, 0, 0)
});
keys.push({
frame: 2,
value: new BABYLON.Vector3(5, 5, 0)
});
animation1.setKeys(keys);
var animationGroup = new BABYLON.AnimationGroup(“my group”);
animationGroup.addTargetedAnimation(animation1, row);
animationGroup.play(true);
})
scene.createDefaultCamera(true, true, true);
}, undefined, (error) => {
console.log(“error=”, error);
});
Hello, may I ask if this is the way it is done

4

Please provide repro in the playground as it is impossible to troubleshoot from code shared in text here :slight_smile:

5

456 | Babylon.js Playground (babylonjs.com)

Snipaste_2024-03-05_08-56-18
Good evening everyone，His bones are moving, but the model is not moving，

6

456 | Babylon.js Playground (babylonjs.com)
Look at line 76, in babylonjs, the bones transform is hosted to linkedTransformNode, so the bones transform is not valid by code manipulation.

Or you can call linkTransformNode() to unbind the relationship, and the bones transformation can take effect normally.
456 | Babylon.js Playground (babylonjs.com)

By the way, if the model comes with a skeletal animation, the target of the skeletal animation rig is not bones, but a transformNode, and if you unlink it, the skeletal animation of the model will be destroyed.

1 Like
7

Thank you very much, my brother. I have finally solved it

8

If you choose to break the transformNode’s binding, be aware of possible issues with skeletal animations that won’t work.

2 Likes