# 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(
4*Math.sin(time),
4*Math.cos(time),
0.1*Math.sin(time*2)
); // 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);
object.quaternion.copy(quaternion)
object.position.copy(nextPosition);
``````

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.

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 http://jsfiddle.net/yqLab579/

1 Like

Hi!
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 https://threejs.org/examples/?q=extrude#webgl_geometry_extrude_splines, 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