Incorrect Rotation in Keyframe Animation

Questions
1

Hello :slight_smile:
I have a problem with Blender (2.8) exported animation. Its just a simple rotation and location keyframe track on a camera object, to showcase the map. I think the position is okay, but the quaternion rotation track seems very off. Most of the shots are incorrectly aimed at the sky.
Here are my simplified files: (i’ve removed the materials during export to avoid the filesize limit)
files.zip (1.0 MB)

The strange thing is that the animation works well in the https://gltf-viewer.donmccurdy.com (I recommend viewing it there first, to avoid confusion) and both use the same three.js and gltfLoader.js files from the r101 version.
Does that mean that I use the animation incorrectly in my file? I load it like so:

gltfLoader.load( ‘/models/anim-test.glb’,
function ( gltf ) {

  	camera0 = gltf.cameras[0];
  	camera0.fov = 90;
  	camera0.updateProjectionMatrix();
  	let cam = camera0;
  	cam.animationMixer = new THREE.AnimationMixer( cam );
  	let camClip = THREE.AnimationClip.findByName( gltf.animations, 'Camera_Move1' );
  	cam.animations = { 
  		startingShow: cam.animationMixer.clipAction( camClip ), 
  	};
  	cam.animations.startingShow.play();
  	
  	console.log( camera0 );
  	
  	console.log( gltf );
  	scene0.add( gltf.scene );

  }, function ( xhr ) {
  	// console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  }, function ( error ) {
  	console.log( 'Error happened: ' + error);
  }

);

with the mixer updated in the render loop.

2

Try to create your animation mixer like so:

cam.animationMixer = new THREE.AnimationMixer( gltf.scene );

Otherwise the property binding is not created correctly since the camera camera0 is not animated but its parent object with name Camera.

3 Likes
3

Thanks a lot! It works now :heart_eyes:
Thank you for clarification. I didn’t realize that the camera even had a parent. I guess that’s something new to know about the gltf loader and animation system.
The problem is now Solved, but I’m still a little confused. Does the object with animated properties (pos, rot, scale) always has to be the one imported from the .gltf? In Blender, animations are properties of the object, but in gltf/three it seems like keyframe tracks exist on their own. Is it then possible to apply the animation from GLTF onto a mesh outside of it? For example:

var mesh1 = new THREE.Mesh(...);
gltfLoader.load( link, function(gltf){
	var clip = THREE.AnimationClip.findByName( gltf.animations, 'some_action' );
	mesh1.mixer = new THREE.AnimationMixer( mesh1 );
	var animation = mesh1.mixer.clipAction( clip );
});