Animating with Three.js and Mixamo for stunning visuals

My main objective is to create a robust customization system for my game similar to ROBLOX, where users can select from a wide range of clothing and accessories for their avatars. However, I am facing an issue when it comes to animating the characters using Mixamo, as it requires a fully boned rig for downloading animations. The challenge lies in the fact that each user-created character will have a unique rig, making pre-made rigs impractical due to the endless combinations.

Considering alternatives, I am contemplating using Tween.js, but this approach would be labor-intensive and time-consuming for obtaining even a single animation, not to mention inferior to Mixamo's quality.

To provide a visual representation of my dilemma, here is an image: https://i.sstatic.net/yt5CC.png

I hope the diagram clarifies my issue. Below are some potential solutions I have brainstormed, although uncertain of their feasibility:

  • Is it possible to download Mixamo animations without a specific rig, allowing them to be applied to any character?
  • Could I animate a generic base rig and then add textures for all body parts (instead of downloading numerous rig variations, focus on clothing textures only)?

If anyone has insight or suggestions on how to tackle this challenge, please share your knowledge!

Answer №1

If you were like me and had the same question: To start, make sure to download the animation you want from Mixamo onto the base model without any customizations. After loading the animation into three.js, you will see a group containing all the components of the model. From there, you can manually add textures to specific parts of the rig as needed. This way, your character will move according to the animation while maintaining the desired appearance set by you or the user.

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

Using the for loop to asynchronously fetch data and access the finished result variable

Exploring the world of asynchronous JavaScript, I find myself pondering a question: how can I ensure that my code only starts working on a created array once all queries are completed? My current approach involves fetching pages in a for loop. Here's ...

Limited achievements seen with AJAX. Occasionally, either no data is retrieved or an error is encountered

My experience with AJAX has been frustrating so far. I am trying to populate some textboxes with values from a database, but nothing is getting inserted. The only thing that's happening is the appearance of two errors related to specific values which ...

checkboxes selection using JavaScript

Can someone help troubleshoot my JavaScript code for creating multiple checkboxes? It seems that all the boxes are being checked at once and I'm not sure why. for(var i=0; i<3; i++){ document.write("<div class='checkbox'>< ...

Can Mongoose handle document arrays editing and version control efficiently?

Currently working on a web application using Node.js and MongoDB/Mongoose, the main model in our project is Record which contains numerous subdocument arrays such as "Comment", "Bookings", and "Subscribers". However, when users click the delete button in ...

The JavaScript code fails to run after implementing highway.js unless the page is manually refreshed

Recently I started using highway.js to implement a fade out/fade in effect while navigating between pages. Despite going through the documentation, I couldn't figure out why my other JavaScript files aren't activating when the new content block l ...

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

Validation of forms in Vue.js and submitting data using AJAX

Trying to implement form validation using Vue.js for submitting data via ajax when the element is valid. However, encountering difficulties with the validation process. Below is my HTML code: <div id='form' 'v-on'="change:updateFor ...

Having trouble with TypeScript configuration of typeRoots and types functionality not functioning correctly

My Current Directory Structure Let me show you the layout of my files: root ├──typings/ # currently empty ├──package.json ├──package-lock.json ├──tsconfig.json └──main.ts This is what my tsconfig.json looks like: { ...

Acquiring data from a JavaScript file in JSON format with JINT

Recently, I received a JavaScript file that contains two JSON objects. The first object stores different languages, while the second object contains various labels. var languages = {"Languages":["English","Cymraeg","Deutsch"]}; var labels = [{"$JOB":["Job ...

Enable automatic playback of HTML5 video with the sound on

I want to add an autoplay video with sound on my website, but I'm running into issues with newer browsers like Chrome, Mozilla, and Safari blocking autoplay if the video doesn't have a 'muted' attribute. Is there a clever HTML or Javas ...

Modifying the index value within an array

I am facing a challenge where I must remove a letter from each element in an array and alter the first letter if it is at index 0. My current strategy involves the following code: function capital(arr, char){ let str = ""; let result = &q ...

Arranging asynchronous functions using async/await in Node.js/JavaScript

When it comes to organizing my code in js/nodejs, I frequently rely on this pattern. (async function(){ let resultOne = await functionOne(); let resultTwo = await functionTwo(); return { resultOne: resultOne, resultTwo: resul ...

switching tabs on a webpage

My PHP page has a menu tab with tabs labeled as Dash and Project. The Dash tab contains a table displaying data. The scenario is that when I click on a row in the table within the Dash tab, it should navigate to the Project tab, where a simple form is disp ...

Issue with deep linking functionality on S3 storage service turning out to be

After successfully deploying my angular5 app to: http://myApp.s3domain.amazonaws.com The Angular router is automatically directing me to http://myApp.s3domain.amazonaws.com/home However, when I try to access a link with a unique parameter like so: http:/ ...

Exploring the Functionality of Bootstrap 5 Collapse Component with VueJS 2

I am attempting to implement the Bootstrap 5 "collapse" component on a button in my VueJS2 project, but I am uncertain about how to integrate it. Within my single file component, the structure is as follows: <template> section: ...

Unexpected next() error occurred

Currently, I am working on a project using node.js along with express and MongoDB. I have encountered an error that I cannot seem to understand. When I remove the next() function call, everything works perfectly fine. However, when I include next(), it tr ...

Issue with encoding cyrrilic letters for key transmission operations

I've encountered a rare issue that has stumped me even after hours of searching online. I am using node-key-sender (similar problems arise with modules like robots.js) for simulating keyboard inputs. The code below works perfectly when using English ...

What is the best way to switch from one HTML file to its associated JavaScript and CSS files once a specific event is activated?

Is my approach to organizing and building my first website game correct? I have 5 separate HTML files along with their respective JS and CSS files. My goal is to slide in the content from the next HTML file, including its corresponding JS and CSS files, wh ...

Taking control and altering the default alert() function using JavaScript

A while back, I managed to intercept alerts and replace the default browser popup with a modal of some sort. Unfortunately, I can't remember exactly how I did it, and my old code doesn't provide any clues. I've tried searching on Google with ...

Is there a way to change the color of a specific tab without affecting the content within it

I am attempting to change the color of an individual tab using jQuery. However, when I set the background attribute in CSS, it colors the entire background instead. What specific property should I be setting to only change the color of the tab itself? ...