Creating animated glTF Characters with Mixamo and Blender

End result: Rigged glTF 2.0 character with multiple animation clips.
  1. Automatic character rigging. Upload a 3D model, place a few markers on joints, and you’ve got a rigged character. Note: Mixamo only supports humanoid characters.
  2. Library of customizable animations. Mixamo’s library contains thousands of free animations, any of which can be used with their default characters or any model you upload.

1. Create a rigged character

When downloading a base character from Mixamo, choose Format=FBX and Pose=T-pose.

2. Download animations for the character

Export animations from Mixamo in FBX format, without skins.

3. Import everything into Blender

  • character.fbx
  • character@run.fbx
  • character@idle.fbx
  • File → Import → FBX.
  • Under Main, select Manual Orientation.
When importing the FBX, select “Manual Orientation” under the “Main” tab.
  • Under Armatures, select Automatic Bone Orientation.
When importing each FBX, select “Automatic Bone Orientation” under the “Armatures” tab.
  • Select the base character model, then Import FBX.
  • In the Blender scene graph, rename this object as Character, and rename its animation as TPose.
The base character should have name like “Character”, and the animation should be called “TPose”.
  • Repeat for each animation file. After importing each animation file, name the animations Run and Idle respectively.

4. Preview the character animations

  • Play animation in the Blender’s footer.
Play animation in the Blender footer.
  • Open the Dope Sheet in a new panel.
  • In the Dope Sheet panel, select Action Editor in the footer.
Open the Dope Sheet in a new panel, then select Action Editor.
  • After selecting the character, try playing different Actions (there will be one Action for each animation, plus the T-Pose).

5. Export to glTF

  • Delete the armatures from the animations, leaving only the base character and its armature.
Delete the armatures for each animation, leaving only the base character.
  • Khronos Group exporter only: Ensure the actions you want to export
    are either active, stashed, or “pushed down” into NLA tracks.
  • FileExportglTF
  • Kupoman exporter only: In the Animations section, ensure that All Eligible objects and armatures are exported. This ensures we get all of the available animations, not just the T-Pose.
Select “All Eligible” for animation Armatures and Objects.
Cycling through animations in the online glTF viewer.

Appendix: Loading animated characters in A-Frame

<a-entity gltf-model="url(character.gltf)"
animation-mixer="clip: Run;"></a-entity>

Resources

  • Using Mixamo with Blender. The first ½ of the video is relevant — disregard everything after the author begins creating a single combined animation track. The video advises using an experimental Apply Transform option, which DID NOT work for me in recent versions of Blender.
  • A-Frame / Mixamo walkthrough. This video describes a somewhat different workflow, and targets the three.js JSON format, but may also be helpful.

 by the author.

--

--

--

Software developer on Project Sunroof, @Google. Previously @GraphiqHQ. @WUSTL '12.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React JS Components

HTML5 Canvas Vs SVG — Which Design Technology to Choose For Your Applications?

#psdToWordpress #aiToWordpress #xdToWordpress #sketchToWordpress

Modern Test-Driven Development with TypeScript and Redux Slices

Let’s build a full stack UK weather app using Node + React Part 2: error handling

Part II: Applying the Theory

4 Essential Things You Must Know About React 18

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Don McCurdy

Don McCurdy

Software developer on Project Sunroof, @Google. Previously @GraphiqHQ. @WUSTL '12.

More from Medium

Three steps to slice a mesh with ThreeJS

For teachers: administering an anonymous class voting using Google Forms

Investigation & Humanity At The Core Of Web Design & Development Projects

empty photo frame held over a vast ocean landscape

Micro-website for a conference