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))

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:

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?