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!

Heyy!

I Want to do something similar but with a pre-recorded video it needs to create 3d model on unity but the process should be automated as the video uploads on my application should return a 3d model from unity or any other tool.
Any suggestions on how to approach this?

Y’all picked like… one of the Hardest things to do in 3d from scratch, generally.

My suggestions would be to export some animated characters from mixamo as glb, load them and get the animations playing, then proceed from there… because converting your “lists of points” to a useful animation is going to destroy your soul.
It involves building animations from scratch, rigging, inverse kinematics, animation retargeting…
There are many good reasons that authoring of animations is done using tools like Blender/Maya etc. and we just export the resulting animations and play them back.

It’s kinda like the difference between making a youtube video, and making… youtube.

I’m not saying its not possible… there are libraries that can assist you, and after studying 3d and graphics for 10 years, I have been able to implement dynamic retargeting/IK from mocap point data, badly.