Is it possible to create an app like this in Three.js?

Is it possible to create an app like this in Three.js?

I have a rigged 3D character. I have body tracking tech that gives me xyz coordinates for my joints in real time. The question is: can I use those coordinates to animate a 3D character in real time with Three.js?

Thanks for any help you can offer.

Do you know these official examples?
(three.js examples)

three.js examples

three.js examples

three.js examples

Do you know these official examples?

These all use premade animations. I think what @wowsers is looking for is creating animations on the fly to match body positions. I think you would need an IK solver for this, and as far as I know, the only major work in this field (for three.js) is by Jordan Santell here:

1 Like

Avaer wrote a full body IK system in three.js with WebXR support. Here’s a talk about it at the M3 meetup: Full body IK avatars in THREE.js - YouTube

Code: GitHub - exokitxr/avatars: Avatar system for Exokit
Video: https://i.imgur.com/JsUrWj3.mp4

Note: that repo isn’t being maintained currently, though many improvements to the avatar system since then have been going into Webaverse.

Also hi, this is my first post! o/

5 Likes

Hi , wowsers hope you are doing fine

yes this is possible in three js , but for this you need to use saveral machine learning premade models or developed by you to track your usecase.
The example that you have given can be resolved with tesnsorflow js BLAZEPOSE .

the small example is given in below link developed by one of the google developer [ Rich ] .
she also have developed kalidokit wonderful tool to blend shapes and kinematic resolver . currently it is not popular libarary .

DEMO : https://codepen.io/mediapipe-preview/pen/oNPKmEy
CREDITS : yeemachine (Rich) · GitHub

Thanks !

Ok thank you!

Where u Able to create somthing like the video of arkit in javascript?