CODEWITHSUNDEEP
three.jsskeletal-mesh
Tamás Katona
Tamás Katona

Reputation: 833

Three.js parenting mesh to bone

My goal is to attach separate objects (eg: wearable items) to an animated model, so that the bound objects are controlled by the models animation.

I have found these, but all seems outdated.

I experimenting with a character imported from blender that is skinned & rigged & animated.

My problem is: As I add a new mesh to a specific bone of the model (the commented out part in the code), the current animation clip is switched to the first one (t-pose), and the skinning get broken (model turns white). However the object is connects to the bone, and moves with it.

const {scene, animations} = await Utils.loadModel('model/someName.gltf');
const model = scene.children[0];

const material = new THREE.MeshBasicMaterial();
material.alphaTest = 0.5;
material.skinning = true;

model.traverse((child) => {     
    if (child.material) {
        material.map = child.material.map;
        child.material = material;
        child.material.needsUpdate = true;
    }
    if (child.isBone && child.name === 'RightHand') {
        // child.add(createMesh());
    }
});

gScene.add(model);

It dosen't work correctly, even if a simple cube is added, but it would be nice if I could add boots to a character, that is moves as its foot.

Upvotes: 0

Views: 1879

Answers (2)

Slash BMP
Slash BMP

Reputation: 1

In Blender You may rig the other mesh with skeleton and animate it the same as the original. ThreeJS has an object name AnimationObjectGroup to sync every action like the example here.

https://threejs.org/examples/?q=animation#misc_animation_groups

const animationGroup = new THREE.AnimationObjectGroup();
animationGroup.add(yourRiggedModel1);
animationGroup.add(yourRiggedModel2);
const mixer = new THREE.AnimationMixer( animationGroup );

// then animate mixer as usual.

mixer.update( delta );

Upvotes: 0

Tamás Katona
Tamás Katona

Reputation: 833

Looks like I have found a solution.

I updated the demo (It's only a PoC) https://github.com/tomo0613/3d-animated-char-test

first (in blender):

  • add bones to the shoe that should move with the character. (i guess these should heave the same bones [positions, rotations, sizes]; there are differences in the demo)

then is JS code:

  • add the shoe (entire mesh) as a child mesh to the leg bone.
  • before every render, copy the characters bone properties to the shoe bone properties [position & quaternion]

I'm still curious, is there any intended /or better way doing this.?

Upvotes: 0

Related Questions