Achieving proper rendering of animations using Three.js ObjectLoader

I'm having trouble with rendering an animation in Three.js using a mesh from MakeHuman. While the mesh loads correctly, it becomes distorted when the animation is running. Although adding a SkeletonHelper shows that the skeleton performs the animation correctly, its orientation differs from that of the mesh.

Upon loading, the mesh lies face-down while the skeleton is upright. If I rotate the mesh in Three.js to be upright, the skeleton inexplicably flips upside down. This discrepancy may be contributing to the distortion in the mesh.

Here are the steps I am following:

  1. Create a mesh in MakeHuman.
  2. Export as a Collada *.dae file.
  3. Import into Blender.
  4. Retarget to a BVH mocap file using the MakeWalk Blender add-on.
    • If I preview the animation in Blender at this stage, it appears flawless.
  5. Following suggestions from multiple sources, I ensure there are no transformations applied to the mesh and armature.
  6. Export the entire scene using the Three.js exporter for Blender.
  7. Load the scene along with the embedded animation using the ObjectLoader.

Any assistance would be greatly appreciated. Thank you.

Update - For a moment, I managed to achieve partial success with the model animating mostly as expected (albeit with slight distortion) and both the skeleton and mesh aligning in the same direction. However, I am currently unable to replicate this achievement. It seems likely that clearance or application of rotation, location, and scale in Blender made the difference, but my attempts to repeat the process have failed. The synchronization between the skeleton and mesh is off again. Surely, this must be the root cause?

I believe I need to apply rotation and location while clearing the scale. Yet, applying location affects the status of scale. Perhaps, my understanding of Blender's workings is lacking. What is the correct procedure for resetting or applying Rot, Loc, Scale? Should these actions take place before or after retargeting to the BVH file? Is it necessary to perform these actions on every mesh or bone individually?

javascriptanimationthree.jsblendermakehuman

Answer №1

After some trial and error, I finally cracked the code on getting it to work, even though the reason my initial method failed remains a mystery.

Upon importing the model into Blender with all meshes selected by default, be sure to reset the rotation, location, and scale. Next, if the orientation of the model is off, hit 'n' to bring up the Transform panel, choose the main mesh node from the Outliner, and adjust the rotation accordingly. Finally, don't forget to press ctrl+A to apply the new rotation.

In essence, rather than sticking with the imported rotation settings, it's best to start fresh with your own adjustments.

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

Providing input to a nested mongoose query

I can't figure out why I keep experiencing 504 Gateway timeouts. app.get("/api/exercise/log", function(req,res) { let userId = req.query.userId; let from = req.query.from; let to = req.query.to; let limit = req.query.limit; console.log("lim ...

javascriptmongodbexpressmongoosemongodb-query

Struggling to merge two variables together and receiving this error message: "mergedObject is not defined."

New to Node.js/Express and trying to combine two objects to save them to a collection. Any advice would be greatly appreciated! Thank you in advance for your time. This is what I've put together, but it's not functioning as expected: app.post( ...

javascriptnode.jsexpress

Updating HTML content based on an active user session using Node.js/Express - A Step-by-Step Guide

I'm struggling to find a way to remove the login/signup buttons once a user has successfully logged in. The issue lies within my header file that needs some modification. <section class="header"> <div class="wrapper"> <nav ...

javascriptnode.jsexpress

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

javascriptangularjsangulartypescriptwikitude

Are simulated AJAX requests a viable solution for displaying a "wait" cursor?

While I initially wanted to use the CSS cursor property to put the user's cursor in a "wait-state" during certain actions, I encountered issues that are pushing me to explore more innovative solutions. The main problem is that the cursor doesn't ...

javascriptajaxcursor

Vue continues to execute the timeout method even after it has been successfully cleared

In an attempt to postpone an API call for fetching search results, I have implemented the use of setTimeout and clearTimeout methods in my Vue application. A watcher has been set up on a search variable so that whenever it changes, the corresponding code ...

javascriptvue.js

What steps should I take to update the state of this navbar?

Trying to understand why the prop I want to pass won't work with the toggle function: function custToggle({e}){ e.custOrFalse= !e.custOrFalse; var custButton='cust page' if ( e.custOrFalse==true ) { custButton='cust lo ...

javascriptreactjsnext.js

Creating an array like this in JavaScript during an API call using Ajax

"WorkingHours": { "Monday" : { "open" : "10:00 am", "close" :"5:00 pm" }, "Wednesday" : { "open" : "10:00 am", "close" :"5:00 pm" ...

javascriptphpajax

What is the best way to set jade as a global variable in a node.js Express application?

Currently, the routing function shown below is operational: exports.summary = function(req, res, next) { var jade = require('jade'); res.render('myView', { main: jade.renderFile('./views/summary.jade') }); }; The ...

javascriptnode.jsexpressincludepug

Is there a way to duplicate a GLTF model that has been imported into the Autodesk Viewer?

I encountered an issue while trying to dynamically clone a loaded GLB model and allow the user to position it in the scene. Despite using the model.clone() method, the cloned model ends up appearing at the same position as the original, causing changes in ...

javascriptthree.jsautodesk-forgeautodesk-viewer

Learn how to dynamically modify the text and color of a column value within a <v-data-table> component in Vue.js 2.6.11 and Vuetify 2.2.11 based on a specific condition

In my current project where I am developing a web application using ASP.NET CORE for the backend and vue.js for the frontend, I encountered an issue with Vuetify's CRUD Datatable UI Component in a page named "Category". The problem arises when trying ...

javascriptvue.jsvuejs2vuetify.js

Summoning within a rigorous mode

I am facing an issue with my configuration object: jwtOptionsProvider.config({ tokenGetter: (store) => { return store.get('token'); }, whiteListedDomains: ['localhost'] }); In strict mode, I ...

javascriptangularjs

How can I retrieve button clicks with JQuery DataTables mRender?

I am currently using the following ajax call: $('#stlmtddel').click(function(event) { var customerid = "<%=customerid%>"; var appointofcaid = "<%=appointofcaid%>"; var kindcontrolid = "<%=kindcontrolid% ...

javascriptjqueryajax

Switching up the colors of toggle arrow icons using jQuery

https://i.sstatic.net/Id0XP.png I am currently working on sorting a table and I want to use arrows to indicate which column is being sorted. I have the functionality to sort with arrows in place, but I would like to customize the color of the arrow in the ...

javascriptjqueryhtml

Design an interactive vertical divider using d3

I am interested in developing a vertical rule similar to the one demonstrated at that updates its value dynamically based on the user's mouse movement. The example provided uses cubism.js, however, I would like to achieve the same functionality usin ...

javascriptjqueryd3.js

The query successfully executes in PGAdmin, but encounters an error when running on the server (nodelocalhost

We have encountered an issue with our node server and pg module when querying our postgres database. While the query executes successfully in PGAdmin, it throws errors on our server (js). Can anyone provide insights into what might be causing this discrepa ...

javascriptpostgresqlpg

What is the process for modifying a task on my to-do list with a long press?

I'm currently working on implementing a task update feature in my project. However, I've encountered an issue where the prompt only works in the browser environment. Is there a way to make this work in React Native or are there any alternative so ...

javascriptreactjsreact-nativeexpo

Creating a unique directive specifically designed to be used within an ng

I have a unique custom directive that I implemented in AngularJS. The directive is called within an ng-repeat loop, as shown below: The array of objects, selectedMealCalc.calculated_foods, is aliased as 'items' <!-- CUSTOM DIRECTIVE --&g ...

javascriptangularjsangularjs-directive

Having trouble getting the jQuery keydown trigger to function properly?

After the document has finished loading, I execute this script: $(function () { $("input").keydown(); }); This script is part of a chrome extension that runs on every page the user visits. However, it does not work on certain websites like Twitter ...

javascriptjquerygoogle-chrome-extension

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

javascripthtmlcsscss-transforms