Continuous quaternion on a curve

Hi! I’ve been stumbling on this problem a couple of times in past, and i give up, need help.
So, i have a parametric curve, something like this:

let nextPosition = new THREE.Vector3(
); // so its almost a circle, with a little Z axis wave

So when time grows, i move object on this curve. But i also want to rotate it to face the direction it is moving. To do that i calculate quaternion:

let direction = lastPosition.sub(nextPosition).normalize();
let quaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0,1,0), direction);

And it works, sorta. But when time goes around PI/2 i get this 360 rotation:

Even tho the curve is looped perfectly and smooth, at some point it adds 360 rotation. Seems like a common rotation issue, but i have no idea currently how to overcome that.

Also, this doesnt happen if Z coordinate always 0.
Additional factors are:

  1. this curve to be interactive following random path.
  2. object is just an example, as you see on the gif, im moving some vertices-trail, and they have same issue because of quaternion. So cant really use lookAt.

Here is fiddle of the problem

1 Like

Are you looking for a solution with quaternions?
I experimented with DataTexture: Spline + DataTexture

nice demo!
So in your approach, you use normal+binormal to set orientation, right?
Same is happening in this demo, im not really fixed on quaternions, its just not quite obvious to me how to calculate binormal on a random curve, gotta get deeper into that =)

Yeah, and the core code in shaders for the Koi fish is just a port from that official demo example you linked :angel: