Exporting Blender Animations to ThreeJS
May 2, 2022
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
- 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).
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.