Using (x,y,z) coordinates information to animate 3D Character

Hi everyone, I am using a handpose estimation model that uses the webcam to generate (x, y, z) coordinates for each joint from a moving hand (the z is estimated accurately). I also have a .glb character with a full t-bone skeleton structure, with hands, that is made using Blender.

What I cannot figure out is how to use these realtime data points to animate the imported 3D character’s hand in Threejs. The (x, y, z) is in 3D cartesian plane and from what I’ve read in the docs, threejs uses Euler/Quartenion angles for rotation (correct me if I’m wrong). I’m at an impasse right now because I am unsure of how to convert this into angular data.

I am fairly new to animation so please do let me know if there are other libraries that can help me do this in an easier fashion.

1 Like