I am trying visualize a human finger's pose with a 3D model in Three.js.
The 3D model is composed of 3 bones that represent the proximal, middle, and distal bones of the human finger, connected in that sequence.
For every frame, I have the global, 3D [x, y, z] positions/keypoints of the joints before and after each bone. The problem is I cannot set the model's pose with these positions/keypoints, I need to calculate Euler orientations (specifically yaw and pitch, with roll = 0) of each bone relative to its parent or the previous connected bone, in order to accurately transform the model's overall pose.
I know I can calculate the global yaw and pitch of any vector on a coordinate system via:
let direction = vector.normalize() let yaw = Math.atan2(direction.x, direction.z); let pitch = Math.asin(direction.y); let roll = 0; //bone.rotation.set(yaw, roll, pitch);
but again, these calculations don't work for local orientations.
lets say the positions/keypoints of the finger are P1, P2, P3, P4 where P1 is the position of the knuckle, P2 and P3 are the positions of the middle joints, and P4 is the position of the tip of the finger
lets also say E1, E2, E3 represent the absolute Euler orientations of the proximal, middle, and distal bone respectively, where En is the orientation of En relative to orientation E(n-1)
How do I go about modifying my calculations to get the local rotations E1, E2, E3 from the global positions P1, P2, P3, P4?