Animating a 3D model with pose estimation data in Three.js

My goal is to animate a rigged 3D model in three.js using pose estimation coordinates. The pose estimation technology I'm utilizing gives me real-time x, y, z coordinates from a person in a video feed, and I want to use this data to move the 3D model accordingly. I started with the code below (found some of it in an answer to a related question)...

... (Your code snippet here) ...
<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/examples/js/controls/OrbitControls.js"></script>

I also looked at this answer on calculating rotations from two vectors, but I've had difficulty implementing it successfully for my needs... How to find rotation matrix between two vectors

Getting the Vector3 data from the pose estimation technology is straightforward, and I grasp most of the logic in the code snippet. However, I struggle to integrate everything to make my 3D model mimic the movements captured by the pose estimation coordinates in the video. All I seem to achieve is making the model 'thrash around' uncontrollably.

From my understanding, to achieve the desired results, I must manipulate the rotations of the bones by computing those rotations using two vectors. Despite extensive research and experimentation, I haven't been able to bring all the pieces together successfully. Any assistance or guidance would be highly appreciated.

Answer №1

Delving into the intricacies of this topic, it becomes evident that breaking it down into smaller segments is imperative.

It appears that your utilization of posenet (a tensorflow library) is quite apparent.

Past experiences have led me to navigate through this challenging issue, and I managed to find a solution that worked for me.

Initially, I correlated each bone in the mesh to a bone in the keypoints array using posenet.

Subsequently, I devised a Skeleton class that defined a skeleton in simple terms, with each bone represented by a separate class such as the elbow joint. These classes encompassed maximum hyperextension and retraction values, utilizing a series of Vector3 values to denote the minimum and maximum xyz rotation values in radians, akin to our range of motion.

Next, I implemented these rotations for each bone, although the results were not flawless, often resulting in arms rotating within the body. To rectify this, I implemented bounding boxes around each bone on the outer mesh to facilitate collision detection with other parts of the mesh, incorporating a tolerance level for each body part (allowing for crossed arms or legs).

Subsequently, I obtained a somewhat accurate estimation which was then applied to a 3D mesh.

If you wish to explore an example of the original concept, feel free to visit this GitHub repository: https://github.com/hudson1998x/2D-To-3D-Pose-Estimation/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to combine an array of objects into a single object in typescript?

Looking for some help with converting an array of objects into a single object using TypeScript. Here's the structure of the array: myArray = [ {itemOneKey: 'itemOneValue', itemTwoKey: 'itemTwoValue'}, {itemThreeKey: ' ...

incorporating my unique typographic styles into the MUI framework

I'm currently working on customizing the typography for my TypeScript Next.js project. Unfortunately, I am facing difficulties in configuring my code properly, which is causing it to not work as expected. Can someone kindly provide assistance or guida ...

Utilizing Loops in a React Component's Function

(React web app development) I am currently working on a project where I need to check the stock status of products using their IDs in a JSON data loop. However, I am facing an issue with the condition checking for the ID match, as it always seems to return ...

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

Tips for designing a button that can execute a JavaScript function repeatedly

My goal is to rotate the numbers clockwise when the rotate button is clicked. I have included all the relevant code. I have created a button that triggers a javascript function when clicked. The problem is that the function only rotates the numbers once. ...

experimenting with adding fresh choices to dropdown menu using ajax and jquery

When attempting to load a list of locations through ajax/jQuery, I encounter an issue. After typing a letter into the input field, the first response is displayed but subsequent responses are simply appended to it. I have tried using .html('') an ...

Utilizing External Libraries in SAPUI5 Extension Development

I am facing an issue while trying to integrate an external library into my UI5 project. Specifically, I am working with jsPDF but it could be any other library as well. I have included it in the manifest.json file in the following manner: "js": [{ ...

Adjusting Aframe/Three to fit the screen - determine appropriate zoom level

How can I zoom the camera in Three.js/A-Frame to make an image fit the screen? Here is the code I am currently using: this._camera = document.getElementById('camera').getAttribute('camera') this._ratio = this._assetWidth/this._ ...

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

"Ajax validation is causing the duplication of the HTML page content within an HTML

My PHP username validation with Ajax code seems to be duplicating my HTML page inside an HTML div element, which is used for displaying Ajax errors. Despite trying various solutions and searching on Google, I have not been able to find a resolution yet. Th ...

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

I am working with a JSON data Object and using $.each to dynamically retrieve the data. However, I want to display all values except for one which is the ID. How can I achieve this and prevent the ID from being displayed in the HTML structure? Thank you. ...

What is the best way to pick an option from a dropdown menu using angularjs?

Is there a way to select an item from a dropdown list in AngularJS without using ng-repeat with an object array? I can easily select an option when using ng-repeat, but how can this be achieved with a normal select list? <select class="form-control" ...

Issue with using tinyMCE alongside jQuery 1.4.2 on Internet Explorer 6

I'm facing an issue with integrating tinyMCE and the new jQuery 1.4.2 on IE6. In our previous projects, we used tinyMCE smoothly with jQuery 1.3.2. However, after the upgrade, a strange problem has arisen. Whenever I click any button in the toolbar (w ...

Extending the number of rows in an Angular mat-table beyond the size of the dataSource

Is there a way to display more rows of data in a mat-table than the length of the provided dataSource? For instance, consider the following sample data: people: [ { name: "John", birthday: "01.01.2000", hobbies: ...

Send the form to the webpage and display various div elements based on the entered information

I have created a form that is designed to display one of four hidden divs on a page, depending on the input provided. Here is the form: <form> <input id="place" name="place" type="text"> <input name="datepicker" type="text" id="datepicker" ...

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

The attempt to decode the string from POST using json_decode failed due to a hang-up in

I'm currently learning about PHP, JSON, and JavaScript. I am facing an issue with using the json_decode function in PHP after receiving a JSON string from JavaScript. I am able to save the JSON string to a file without any problem, but when I try to ...