Exporting Blender Animations to ThreeJS

Are you having trouble getting your Blender animations to work in your ThreeJS game (or project)? Is your .glb (glTF) file loading, but not showing anything? Are your bones not cloning correctly?

If so, please read how I solved this problem using SkeletonUtils.js

Prerequisites:

You are using Blender 3.1+ (This version includes glTF 2.0 exporting options)
You know how to animate objects in Blender using “Armatures”
Your animation is working in Blender
Your game (or project) has a functioning “update” loop

Exporting to ThreeJS

If your animation is ready to be added to your game/project export the animation by navigating to File > Export > glTF 2.0 (.glb, .gltf)

A second window will prompt you to define additional settings for your project. I highlighted the important boxes for my project. You may need to check “+Y Up” if your game perceives the y-axis vertically. Blender assumes the z-axis vertically, so I decided to follow that format for my current game.

I like to load all my 3D models when the game is launched. This allows me to store the objects for later for quick access. Since we are using .glb formatted files, we will need to leverage the GLTFLoader library (link to documentation and downloadable JS file).

After downloading the script, you can now utilize the ThreeJS LoadingManager library (included with the default ThreeJS file) to load your animations (see example below).

var manager = new THREE.LoadingManager();
var loader = new THREE.GLTFLoader(manager); // You need to download this JS file separately
var cache = {};

// Add manager listeners
manager.onLoad = function() { /* Do something */ }
manager.onProgress = function() { /* Do something */ }

// Load all your models from your JSON file (using jQuery) and clone theme for later
$.getJSON("./json/assets.json", function(json) {
    for (const [key, value] of Object.entries(json)) {
        loader.load(value.url, function(gltf) {
            // Define model using the loaded scene
            var model = gltf.scene;
            model.name = key;
            model.animations = gltf.animations;
            model.mixer = new THREE.AnimationMixer(model);
            model.clips = [];

// Add all animations (for nested models)
            for (var i = 0; i < model.animations.length; i++) {
                model.clips.push(model.mixer.clipAction(model.animations[i]));
            }

// (optional) Create animation functions for easier playback
            model.animation = {
                    play: function() { for (var i = 0; i < model.clips.length; i++) { model.clips[i].play(); }},
                    reset: function() { for (var i = 0; i < model.clips.length; i++) { model.clips[i].reset(); }}
            }

// Cache objects for later
            cache[key] = model;
        });
    }
});

Example assets.json file:

This next step is very important: If you try to clone your cached model, and add it to the scene, your object will not copy your SkinnedMesh and bones. The Object3D will only recursively copy the minimum object data (ex: position, rotation, scale, userData etc.) – more info

Before you add your cached model to your scene, you will need to download and utilize the SkeletonUtils.js library – more info

If you clone your object correctly, your model’s children will properly copy the original SkinnedMesh object type:

The last step is to update your model mixer within your game loop. Without this step, your model animation will not work.

This should hopefully resolve your model animation issue. If you have any questions, please message me on Twitter.

Exporting Blender Animations to ThreeJS

Prerequisites:

Exporting to ThreeJS

Follow me on Twitter for the latest updates.