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
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.
Additional factors are:
- this curve to be interactive following random path.
- 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/