How to use QuaternionKeyframeTrack to rotate from -360 to 360 deg, continously

Questions
,
1

when rotating an object from -360 to +360 deg using below code, it works as expected

object.quaternion.setFromAxisAngle(new Vector3(0, 0, -1), value * MathUtils.DEG2RAD);

where value ranges from -360 to 360 deg

but when using QuaternionKeyframeTrack , it does not rotate at all !
just works for cases like 0 to 90, 0 to 180 … even -90 to 90, but not -180 to 180 !

const minQt = new Quaternion().setFromAxisAngle(dir, -360 * MathUtils.DEG2RAD);
const maxQt = new Quaternion().setFromAxisAngle(dir, 360 * MathUtils.DEG2RAD);
const quaternionKF = new QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [
        minQt.x, minQt.y, minQt.z, minQt.w,              
        maxQt.x, maxQt.y, maxQt.z, maxQt.w,
        minQt.x, minQt.y, minQt.z, minQt.w,],
);

how to get the QuaternionKeyframeTrack rotate from -360 to 360 deg ?
expected: -360 >> 0 >> +360 >> 0 >> -360 …

2

any support here please …

3

This is not supported by quaternions in general. If you want to transition from one quaternion to another one, the shortest angle (or in some sense path) is used. So an animation from 0 to 190° will not be done via 0 > 10 > 20 > … > 190 but 0 > 350 > 340 > 190.

Implement your animation in steps like so: Edit fiddle - JSFiddle - Code Playground

Relevant code:

const q1 = new THREE.Quaternion().setFromAxisAngle(xAxis, 0);
const q2 = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI);
const q3 = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI * 2);
const quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [q1.x, q1.y, q1.z, q1.w, q2.x, q2.y, q2.z, q2.w, q3.x, q3.y, q3.z, q3.w]);
4

Thanks @Mugen87 for the response., already i am a fan of threejs !

Now its clear with how Quaternions transition work, make sense when transition required in single animation frame., and in general most of the final orientation requirements (shortest path)

But it would have been better if quaternionKF Animation also supported lerp() transitions,
which currently is possible with sequencing the below finalAngle = [-360, 0, 360] array
object.quaternion.setFromAxisAngle(direction, MathUtils.lerp(currAngle, finalAngle[i], step))

I just wanted to avoid this sequencing myself, instead get it done by quaternionKF clip.
also it will help developer & customer to maintain the rotation sequence configuration with ease

until then, will try as per your suggestion for specific use-cases
for generic, is it possible to have any alternative / update in threejs ?!

5

Two quaternions cannot define a 360º rotation in the way you are asking for. Using a third quaternion as Mugen87 suggests is one option, so that each keyframe is <180º from the next and the shortest path is well-defined. You could also animate rotation.x instead of using a quaternion here, per-component keyframes may be easier to work with.

6

thanks donmccurdy, as suggested, i think i go with Mugen87 suggestion when using muti-axis support,
and with your suggestion for single axis rotation in each KF.