Three.js: How to rebind/reconnect mesh skeleton after reconnecting bone?

user_11923765 0
Viewed 170

Basically, I’m trying to rotate bones on my rigged hand mesh independently on the global axis with direction vectors that I use to calculate their orientation from. I came up with this code to do so:

function boneLookAtLocal(bone, position) {
    bone.updateMatrixWorld()
    let direction = position.clone().normalize()
    let pitch = Math.asin(-direction.y)
    let yaw = Math.atan2(direction.x, direction.z); 
    let roll = Math.PI;
    bone.rotation.set(roll, yaw, pitch);
}

function boneLookAtWorld(bone, v) {
    scene.attach(bone)
    boneLookAtLocal(bone, v)
    bone.parent.attach(bone) 
}

calling this code on the wrist and index finger produces the finger pose I want/would expect:

// hand.wrist and hand.index[0:3] are bones
boneLookAtWorld(hand.wrist, new THREE.Vector3(1, 1, 1))
boneLookAtWorld(hand.index[0], new THREE.Vector3(1, 1, 1))
boneLookAtWorld(hand.index[1], new THREE.Vector3(1, 0, 1))
boneLookAtWorld(hand.index[2], new THREE.Vector3(0, -1, 0))

enter image description here

The problem is, after everytime I call boneLookAtWorld() on a bone, it breaks the connection to the mesh, as you can see from the skeleton helper, the blue/green skeleton lines are no longer connected on the wrist and index bones that I called boneLookAtWorld() on.

So as a result, this solution works up until I want to change the orientation of a bone I already called boneLookAtWorld() on. So if I call boneLookAtWorld() on the wrist again after the previous calls:

// hand.wrist and hand.index[0:3] are bones
boneLookAtWorld(hand.wrist, new THREE.Vector3(1, 1, 1))
boneLookAtWorld(hand.index[0], new THREE.Vector3(1, 1, 1))
boneLookAtWorld(hand.index[1], new THREE.Vector3(1, 0, 1))
boneLookAtWorld(hand.index[2], new THREE.Vector3(0, -1, 0)) 
...
boneLookAtWorld(hand.wrist, new THREE.Vector3(0, 0, 1))

This rotates the wrist but leaves the rest of the finger behind:

enter image description here

Does anyone know how I can rebind the bone to the mesh/skeleton after I reattach it to its parent in my function boneLookAtWorld() to fix this?

mesh three.js animation javascript
1 Answers

In case this helps anyone, there is no need to perform any kind of remeshing.

The reason this is happening is because in:

function boneLookAtWorld(bone, v) {
    scene.attach(bone)
    boneLookAtLocal(bone, v)
    bone.parent.attach(bone)
}

when we attach the bone to scene, scene becomes the bone's new parent. So after we perform the rotation via boneLookAtLocal() and reattach the bone, we aren't reattaching the bone to the original parent! The bone is just being reattached to the scene which it is already attached to.

This is solved by changing boneLookAtWorld() to:

function boneLookAtWorld(bone, v) {
    const parent = bone.parent;
    scene.attach(bone)
    boneLookAtLocal(bone, v)
    parent.attach(bone)
}
user_119237650
Related