Weird xyz rotation using QuaternionKeyframeTrack

I have a weird animation going on in my scene that I don’t understand how to fix…

Animation is created using a QuaternionKeyframeTrack.

The animation works great as long as I only rotate around one of each axis (x,y or z), but if I rotate around 2 or 3 axis it gets really weird. The effect seems to be that the object is growing.

const zAxis = new THREE.Vector3(1, 1, 1); // Super Weird animation

const zAxis = new THREE.Vector3(1, 0, 0); // Works great.

CodePen showing the problem available here

Thanks for your help,


The codepen is empty.

This is no valid axis vector since it has no unit length. Try it with zAxis.normalize();.

CodePen must have been bad linked.

1 Like

Normalizing worked. Thanks :slight_smile: