Add animation to Ready Player Me Avatar in ThreeJS using the Mixamo library and Blender in 4 easy steps

In the previous chapters, we added our 3D Avatar to our scene. Now, let's add some animation to it! We will use Blender to add an animation action to the avatar model downloaded from ReadyPlayer.Me.

Then we will import the model into Mixamo to add the animation to the model.

Blender is a free and open-source 3D creation suite. It's a powerful tool for creating 3D models, animations… Download Blender from the official website: (https://www.blender.org/download/)

To use mixamo, you need an adobe account. Go to https://www.mixamo.com/ and log in with your account, or create one.

Step 1. Convert .glb to fbx

Download the .glb model from the link you got from Ready Player Me.

Open Blender and import the .glb model. You can do this by clicking:

File > Import > glTF 2.0.

Then, click:

File > Export > FBX (.fbx)

to export the model as an fbx file.

Step 2. Add animation to the fbx model

Go to https://www.mixamo.com/ and log in with your account.

Click on UPLOAD CHARACTER and select the fbx file you just exported.

Now select the Animation tab and click on an animation action. You can tweak some parameters to make the animation look better with the sliders on the right side of the screen.

When you are done, click on DOWNLOAD and select With Skin options. Even if we don’t need the skin, downloading the skin will also download the action avoiding an issue with the rotation of the shoulder bones that occurs when you download without the skin.

Step 3. Import the fbx animation to Blender

Open Blender and import the fbx file you just downloaded from Mixamo.

As soon as you import the file, delete all the hierarchy of the imported model from the outliner.

In the end, we want only the action to be imported.

Now assign the action to the armature via the Dope Sheet (Action Editor) and save the action track through the NLA Editor.

You can now export the model as a .glb file.

Step 4. Import the animated .glb model to Three.js

Finally, we can import the animated .glb model to Three.js.
Let's open main.js and update the code.

First, disable the auto-rotation of the //Add OrbitControls code block.

// Add OrbitControls
const controls = new OrbitControls(camera, canvas)
controls.autoRotate = false // disable auto-rotation

Then, create a new /models folder inside the/public folder and copy the animated .glb file you just exported from Blender. Update the path accordingly in the model section of the code. Just put the path ./models/ before the file's name, and Vite will take care of the rest.

// Load the glb model
const loader = new GLTFLoader()
loader.load('./models/Avatar_Dance.glb', // updated glb model path

  function (gltf) {
    const model = gltf.scene
    scene.add(model)
  })

Now, we are ready to add the animation action to the model.
We need to use the AnimationMixer and Clock classes from Three.js to do this. Check the // Add animation action code block below.

// Load the glb model
const loader = new GLTFLoader()
let mixer // create a global variable to store the animation mixer

loader.load('./models/Avatar_Dance.glb',
  function (gltf) {

    const model = gltf.scene
    const animations = gltf.animations

    mixer = new THREE.AnimationMixer(model)
    mixer.clipAction(animations[0]).play() // play the first animation

    scene.add(model)
  })

Finally, we need to update the mixer in the Main Loop by adding a new code block just before the // Animate Loop to initialize the clock.

// Initialize the clock
const clock = new THREE.Clock()
let lastElapsedTime = 0 // create a global variable to store the elapsed time

// Animate Loop
function animate() {
  // Render the Scene
  renderer.render(scene, camera)

  // Update the controls
  controls.update()

  // get the elapsed time and calculate the delta
  const elapsedTime = clock.getElapsedTime()
  const deltaTime = elapsedTime - lastElapsedTime
  lastElapsedTime = elapsedTime

  // Mixer update
  if (mixer != undefined) {
    mixer.update(deltaTime) // update the mixer
  }

  requestAnimationFrame(animate)
}
animate()

That's it! Now you can run the project and see the animation in action.

Check the updated repo on GitHub. Peace. ♥