How can I incorporate various Mixamo animations onto an FBX model in Three.js without skins?

Question

How can I incorporate various Mixamo animations onto an FBX model in Three.js without skins?

I'm working on developing a game that features an animated character with various animations sourced from Mixamo. The goal is to have the character's animation change dynamically based on user interactions within the game, such as Walking, Running, or Idle. Here's how I am currently loading the FBX model (without animations):

loader.load('Assets/Animations/Main.fbx', function(object){
    object.traverse(function (child){
        if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.frustumCulled = false;
        }
   });

   object.rotation.x = Math.PI / 2
   object.position.x = 11;
   scene.add(object);
});

Additionally, I have separate files for animations that do not include skin:

Idle.fbx
Walking.fbx
Running.fbx

The end goal is to achieve something similar to the examples shown here or here. However, both of these references present challenges; one relies on a model with multiple animations attached (while my model has three animations without skin), and the other is written in TypeScript instead of JavaScript.

Being relatively new to 3D modeling, I'm unsure about how to attach all the skinless animations to the main fbx model. Is there a way to combine these animations into a single model using Blender, or can this be achieved directly in three.js?

I would greatly appreciate any guidance or assistance with this. Thank you!

EDIT:

In response to @GuyNachshon's suggestions, should I approach it like this?

First, load the model without animations (yourMesh) and establish an AnimationMixer:

var mixer;

loader.load('Assets/Animations/Main.fbx', function(object){
    object.traverse(function (child){
        if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.frustumCulled = false;
        }
   });

   mixer = new THREE.AnimationMixer(object);
   object.rotation.x = Math.PI / 2
   object.position.x = 11;
   scene.add(object);
});

Next, load the three animation files without skin and add them to an animationsArray. (Not entirely certain if this is the correct method of loading animations...):

loader.load('Assets/Animations/Idle.fbx', function(object){
    object.traverse(function (child){
        if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.frustumCulled = false;
        }
   });

   object.rotation.x = Math.PI / 2
   object.position.x = 11;

   animationsArray.push(object);
   scene.add(object);
});

loader.load('Assets/Animations/Walking.fbx', function(object){
    object.traverse(function (child){
        if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.frustumCulled = false;
        }
   });

   object.rotation.x = Math.PI / 2
   object.position.x = 11;

   animationsArray.push(object);
   scene.add(object);
});

loader.load('Assets/Animations/Running.fbx', function(object){
    object.traverse(function (child){
        if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.frustumCulled = false;
        }
   });

   object.rotation.x = Math.PI / 2
   object.position.x = 11;

   animationsArray.push(object);
   scene.add(object);
});

Once all assets are loaded, initiate the actions:

let actions = mixer.clipAction(animationsArray).play();

And then follow up with:

actions.play();

Will this line trigger the playback of the first animation within animationsArray?

javascript animation three.js blender mixamo

Answer 1

Answer №1

To implement the animations in your project, you will first need to create an AnimationMixer. This allows for smoother animation transitions and control.

Assuming you have set up your scene and added a mesh, the next step is to initialize the animation mixer:

let mixer = new THREE.AnimationMixer(yourMesh);

After initializing the mixer, you can add animations using clipActions:

let actions = mixer.clipAction(animationsArray).play();

To play the animations, call the play method on the actions:

actions.play();

For a better understanding of how to utilize the AnimationMixer, refer to the documentation provided above.

Edit - Addressing your recent edit

If you want to specify which animation should play, there are various methods available. Here's an example from the official documentation:

const mixer = new THREE.AnimationMixer(mesh);
const clips = mesh.animations;

// Update the mixer on each frame
function update() {
    mixer.update(deltaSeconds);
}

// Play a specific animation
const clip = THREE.AnimationClip.findByName(clips, 'dance');
const action = mixer.clipAction(clip);
action.play();

// Play all animations
clips.forEach(function (clip) {
    mixer.clipAction(clip).play();
});

If you're struggling with organizing your code structure, here's a general example demonstrating how to attach animations to an FBX model and manage them:

let mixer = THREE.AnimationMixer;
let modelReady = false;
const animationActions = THREE.AnimationAction;
let activeAction = THREE.AnimationAction;
let lastAction = THREE.AnimationAction;
const fbxLoader = new FBXLoader();

Once everything is initialized, proceed to load the necessary components:

// Code snippet truncated for brevity

Define the animations and actions:

// Code snippet truncated for brevity

Let the animations begin!

// Code snippet truncated for brevity

Putting it all together:

// Import necessary modules and components
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

// Define variables and functions for managing animations
// Code snippet truncated for brevity

Answer 2

To implement the animations in your project, you will first need to create an AnimationMixer. This allows for smoother animation transitions and control.

Assuming you have set up your scene and added a mesh, the next step is to initialize the animation mixer:

let mixer = new THREE.AnimationMixer(yourMesh);

After initializing the mixer, you can add animations using clipActions:

let actions = mixer.clipAction(animationsArray).play();

To play the animations, call the play method on the actions:

actions.play();

For a better understanding of how to utilize the AnimationMixer, refer to the documentation provided above.

Edit - Addressing your recent edit

If you want to specify which animation should play, there are various methods available. Here's an example from the official documentation:

const mixer = new THREE.AnimationMixer(mesh);
const clips = mesh.animations;

// Update the mixer on each frame
function update() {
    mixer.update(deltaSeconds);
}

// Play a specific animation
const clip = THREE.AnimationClip.findByName(clips, 'dance');
const action = mixer.clipAction(clip);
action.play();

// Play all animations
clips.forEach(function (clip) {
    mixer.clipAction(clip).play();
});

If you're struggling with organizing your code structure, here's a general example demonstrating how to attach animations to an FBX model and manage them:

let mixer = THREE.AnimationMixer;
let modelReady = false;
const animationActions = THREE.AnimationAction;
let activeAction = THREE.AnimationAction;
let lastAction = THREE.AnimationAction;
const fbxLoader = new FBXLoader();

Once everything is initialized, proceed to load the necessary components:

// Code snippet truncated for brevity

Define the animations and actions:

// Code snippet truncated for brevity

Let the animations begin!

// Code snippet truncated for brevity

Putting it all together:

// Import necessary modules and components
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

// Define variables and functions for managing animations
// Code snippet truncated for brevity

How can I incorporate various Mixamo animations onto an FBX model in Three.js without skins?

EDIT:

Answer №1

Edit - Addressing your recent edit

Similar questions

Error in three.js: Undefined property 'center' cannot be read

Screen the $http request information prior to transmission

The sequence in which three.js resources are loaded

Unable to display images using jquery

Difficulty retrieving information using AngularJS service post selection of item

Challenges with synchronizing Highcharts horizontally

Interactive form featuring text fields and dropdown menus

Update the positioning of the element to center instead of the default top left origin using jQuery

notifications failing to load properly on my rails application

Challenges with splitting asynchronous code in NPM modules

Unlocking Secret Data with External JavaScript

When using $http in AngularJS, an error may occur when it

Looking for assistance with finding a specific value in Firestore?

Discovering the overlap between two arrays using Node.js

What does my HTML code show in the console log for the AJAX data?

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Real-time Data Stream and Navigation Bar Location

The setState function in React updates the value, however, when a form is submitted, it captures and

Having trouble getting a form to submit to a Rails server using AJAX in IE11 with jQuery

issues with jasmine angularjs tests exhibiting erratic outcomes