Creating a Dynamic Run/Walk Animation

I created a very simple application that will parse the .json file and remove the key frames that don’t change. Making my own exporter/modifying the existing one turned out to be too big of an ordeal. Just download the .exe (sorry mac and linux users, don’t have one) and give it the file. Anyone could also modify it to suit their needs, like I said it’s a small program. I’m sure the Blender exporter will get better with future updates but for now this is a suitable workaround for anyone that wants to mix animations I think.

https://github.com/KyleNBurke/ThreeJSAnimationDataFixer

3 Likes

You should be able to export a character with multiple actions by using glTF. Using the Blender file attached above, here’s a quick test:

Note that while both actions are playing, the arm doesn’t move all of the way through the Throw action. I assume that means it has keyframes in the Walk action and they’re being averaged, so you can fix that by eliminating any keyframes for the arms in the Walk action. On second look, the Blender file looks right. May want to try this more and report a bug if it seems like an exporter issue.

This was created with Kupoman/blender2gltf and THREE.GLTFLoader. There is an official Blender glTF exporter, but it doesn’t support multiple actions yet. Under the selections for which armatures and actions to include, I selected “All Eligible”.

Yeah the Blender exporter just wasn’t designed with the idea of playing multiple animations at once in three.js because it will export all keyframe data, even for bones that don’t move which is the problem.

Also, I could’ve sworn I read somewhere on the github issues page that the Blender exporter was going to be depreciated. I can’t find the thread anymore, maybe the devs changed their mind or something? Regardless, I’m now exporting my models from Blender using .fbx. If anyone is interested in mixing multiple animations with a model exported from Blender in .fbx format you can remove the keyframes that don’t change with some code:

loader.load("model.fbx", function(object) {
		object.animations.forEach(function(clip) {
			for(var t = clip.tracks.length - 1; t >= 0; t--) {
				var track = clip.tracks[t];
				var static = true;
				var inc = track.name.split(".")[1] == "quaternion" ? 4 : 3;
	
				for(var i = 0; i < track.values.length - inc; i += inc) {
					for(var j = 0; j < inc; j++) {
						if(Math.abs(track.values[i + j] - track.values[i + j + inc]) > 0.000001) {
							static = false;
							//console.log("found change: " + clip.name + " -> " + track.name);
							break;
						}
					}
	
					if(!static)
						break;
				}
	
				if(static) {
					clip.tracks.splice(t, 1);
				}
			}
		});
});

Thanks for this! I’ve added a modified version of this code to a guide I’ve written on how to export models from Blender for use in three.js:

2 Likes

Nice guide! Glad I could be of help.

1 Like