javascript – Map (vrm) animated humanoid model based on skeleton coordinates in three.js

I’m really new to three.js and animation in general, and currently pretty confused with concepts like what rotation angles are/what exactly a VRM is and how it interacts with three.js/what is humanoid animation etc, but i will try to be as explicit as i can about my question below.

So i have a sequence of frames, where each frame has a set of coordinates (xyz, imagine x goes from left to right on your screen, y from top to bottom and z comes out the screen) for human joints (e.g. left foot, right foot, left shoulder etc…). And I would like to have a 3D animated model move based on the provided coordinates.

What I have seen people done so far (e.g. RM motion capture demo using pixiv three-vrm), it seems like they would modify the rotation (z) of the human bone node (returned by getBoneNode) in order to map the human action onto the animated model.

My questions are:

  1. You can (e.g. like the author of above link) and only need to compute the rotation around z-axis since the input is a 2D video, but in my case it’s 3D coordinates, how can I calculate the rotation value? From the documention on Object3D of three.js, looks like the rotation are Euler angles.

    i. But how can one calculate these Euler angles given e.g. the coordinate of left shoulder?

    ii. And what angles of which humanoid body/bone part do I need to do this calculation for? e.g. Does it even make sense to talk about rotation of LeftShoulder or nose?

    iii. this probably is silly, but just thinking out loud here, why can’t I just supply the xyz coordinate value as the position attribute of these humanoid bone node? e.g. something like:

    currentVrm.humanoid.getBoneNode(THREE.VRMSchema.HumanoidBoneName.Neck).position = (10, -2.5, 1)

    this would not get the animated model moving the same as the person in the frames with coordinates provided?

  2. What exactly does a humanoid bone node look like or how are they represented? from three.js doc, it only says it’s a Object3D object, it cannot be just a vector right? because from my limited understanding of Euler angles, it doesn’t make complete sense to have all three Eulers angles of a vector (since it can’t rotate like a cylinder). The reason im asking this, is because im confused on what angle and how needs to be calculated for each humanoid bone node, e.g. i have leftShoulder = (3, 11.2, -8.72), do i just calculate its angle to each xyz axis and supply these angles to the rotation. attributes of the bone node?