What do I need to create 3D animated humanoid character? (newbie)

New to threejs and animations in general, currently I have a project where I’d like to create a 3D animation from a set of 3D coordinates of a person (17 in total: different joints e.g. knee, shoulder etc), and display it on a web browser (in the end, it would ideally look like for example a 3d zombie character that is in the same pose as the person). But I have no idea where to start, so some guidance would be really appreciated!

  1. Is the set of coordinates enough? if so then how can I construct a 3D character based on it? I’m experimenting with first loading a vrm humanoid model (basic vrm from three.js example/models), and calculate the euler angles from the 3D coordinates I have, but this process seems like tedious, and also many times the animated angle does not look very natural (e.g. upper leg and lower leg is bent in some way, could be my calculation as well)
  2. If I need additional values/measurements, what would that be? a more detailed 3D surface coordinates somehow?
  3. Any suggestions on general readings about 3D animation with code (what they are, how they are made and how they are rendered etc) and its interactions with three.js? Also I also there are a lot of terminologies people using like blending, mixer, rigged, etc, is there reading on these as well? or it’s basically google search homework i need to go through.

thanks a lot!

3d coordinates are not quite enough, real bones can also twist - so you need rotation data. You could maybe infer the rotation from joint constraints sometimes, but not in general case I guess

thanks for the reply, so you are suggesting to get more accurate Euler angles (rotation data) somehow that are not from the 3d coordinates inferred? and would that be all one needs?

Im saying that these two red dots positions would be not enough to correctly place the bone, for example:
Screen Shot 2021-09-21 at 12.28.26

Something related: Reference | An online tool to help you sketch human figures

thats a good point, although in this case i have more than just two coordinates (e.g. ankles, hip, eye, shoulder, elbow etc), so i imagine given hip, knee and ankle the rotation should be fixed.

thanks for sharing, but currently i have a set of coordinates and would like to programmatically use that to create animation (e.g. by assigning rotations to each joint in a vrm humanoid i suppose?), the link you shared seems more like manual creation

right, that would be

You could maybe infer the rotation from joint constraints sometimes

that I said earlier, in this case - knee joint constraints

Hi there, I’m facing a similar challenge and wonder if there is a solution?

In my project, a C++ app captures real time bone data from a depth-sensing ZED2 camera, analyze it in real time and send it in BODY_38 format.

The data in each frame looks like this: { keypoint:[[0, 0, 0], [1, 2, 3], [3, 4,6], …] }

There is a Unity plugin that animates avatar base on this information, but I cannot seems to find anything similar in Javascript.

And I’m wondering if there are any standard format for controlling avatars? Or are there any suggested way to implement it?

Thanks a lot!