ThreeJs: How to rotate an already animated object

Question

I have created an object (spaceship) in Blender, animated its movements (make it wobble/rotate a bit randomly) and exported the 3D model to ThreeJs.

If the user presses LEFT ARROW, the model should rotate towards its left on the X-Y plane, and similarly for RIGHT ARROW.

HOWEVER, due to the animation, the rotation coordinates keep getting reset. The following images will clarify the issue:

This is from the console where I'm printing out the rotation of my spaceship mesh:

HOWEVER, immediately afterwards:

What I want: is for the mesh to rotate when I rotate it, and then wobble ABOUT that new axis, rather than just about its original orientation. In other words, the animation should have relative rotation, not absolute rotation. Is that possible?

Answer 1

If you are adding the model using the three.js provided loader, probably the GLTFLoader, then you will get a clear object hierarchy. That is, if you loaded your object like this...

GLTFLoader().load('something.glb', (gltf) => {
  //... the code below goes here
})

So, now if you just run...

console.log(gltf)

You will see the object hierarchy I am talking about. Here, you need to detect where are your animations? Are they under gltf.scene.animations? If so, then you will need to add a group and paste your model in there. This way, the model will be animated alone where you will animated the group which is another variable — especially a new Object3D.

Else, just animate the gltf.scene object and you will be ready to have your things working as you wanted.