Continuous quaternion on a curve

Questions
1

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:

ezgif-1-0e94841dcd19
ezgif-1-0e94841dcd19600×573 868 KB

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

1 Like
2

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

3

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 =)

4

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