Loading Animations by Name

Questions
1

I have created an aircraft model in Blender with animations for various parts. Blender seems to save the animations in random order. I am able to figure out the order by loading the model in 3D Builder. However, I would like to allow users to save their animations with standardized names and let the three.js loader find and assign them correctly.

Here is part of my current subroutine for loading the model. ACmine is the pointer to the model. I use anmfps = 24 because that is the speed used by Blender.

// Load Airplane
function loadAirPln() {
	fname = acpath + acfile;
	gltfLoader = new THREE.GLTFLoader(loadingManager);
	gltfLoader.load(fname, function (gltf) {
		// The OnLoad function	
		ACmine = gltf.scene;
		// Animation #01 Rudder
		var clip01 = gltf.animations[0];
		mixr01 = new THREE.AnimationMixer(ACmine);
		var actun01 = mixr01.clipAction(clip01);
		actun01.play();
		if (mixr01) mixr01.setTime(rudder/anmfps);
		// Animation #02 Canopy
		var clip02 = gltf.animations[1];
		mixr02 = new THREE.AnimationMixer(ACmine);
		var actun02 = mixr02.clipAction(clip02);
		actun02.play();
		if (mixr02) mixr02.setTime(canpos/anmfps);
		// Animation #03 Elevator
		var clip03 = gltf.animations[2];
		mixr03 = new THREE.AnimationMixer(ACmine);
		var actun03 = mixr03.clipAction(clip03);
		actun03.play();
		if (mixr03) mixr03.setTime(elvatr/anmfps);
		// Animation #04 Propeller
		var clip04 = gltf.animations[3];
		mixr04 = new THREE.AnimationMixer(ACmine);
		var actun04 = mixr04.clipAction(clip04);
		actun04.play();
		if (mixr04) mixr04.setTime(spnprp/anmfps);
		***
		// Add to Scene
		scene.add(gltf.scene);
	});
}

Here is the routine for “playing” the animations. I am not really “playing” the animations, but setting each animation to a specific frame (0 to 360) based on my computations.

// Rotate Airplane
function roteAirPln() {
	***
	// Amination - Rudder
	[Compute Rudder position]
	if (mixr01) mixr01.setTime(rudder/anmfps);
	// Animation - Canopy
	[Compute Canopy position]
	if (mixr02) mixr02.setTime(canpos/anmfps);
	// Animation - Elevator
	[Compute Elevator position]
	if (mixr03) mixr03.setTime(elvatr/anmfps);
	// Animation - Propeller
	[Compute Propeller position]
	if (mixr04) mixr04.setTime(spnprp/anmfps);
	***
}

Does this method of loading and “playing” animations make sense or is there a better way?

If it looks okay, how can I change the loader to load the animations by name?

	var clip = gltf.animations[rudder_animation_name];   <<<=== something like this?
	mixrudder = new THREE.AnimationMixer(ACmine);
	var actun = mixrudder.clipAction(clip);
	actun.play();
	if (mixrud) mixrud.setTime(rudder/anmfps);

Thanks!

2

As often happens, once I ask the question, I find an answer. It appears that the required code is something like this:

mxRudr = new THREE.AnimationMixer(ACmine);
var clip = THREE.AnimationClip.findByName(gltf.animations, "tail_rudderAction");
var actun = mxRudr.clipAction(clip);
actun.play();
if (mxRudr) mxRudr.setTime(rudder/anmfps);

So the only remaining question is whether the method I am using is the best method.

3

Using AnimationClip.findByName() is perfect for this use case. The idea is to call it with an array of animation clips and a particular clip name. The method will then automatically pick the correct animation clip from the array.

1 Like
4

Thanks! Good to know when I am actually doing something right. And glad that, once again, three.js has anticipated my needs.