THREE.js: Why does my object flip over while traveling on a spline?

Question

After my initial message, the Three.JS Object following the spline contour - problems with rotation / touch and the problem with constant speed , I still have the problem that the object flips at certain points along the path.

See how this happens on this fiddle: http://jsfiddle.net/jayfield1979/T2t59/7/

function moveBox() { if (counter <= 1) { box.position.x = spline.getPointAt(counter).x; box.position.y = spline.getPointAt(counter).y; tangent = spline.getTangentAt(counter).normalize(); axis.cross(up, tangent).normalize(); var radians = Math.acos(up.dot(tangent)); box.quaternion.setFromAxisAngle(axis, radians); counter += 0.005 } else { counter = 0; } 

}

The above code is what moves my objects along a specific spline path (in this case, an oval). It was mentioned by @WestLangley that: "Warning: the cross-product is not correct if the two vectors are parallel."

As you can see, from the shape of the path I am going to meet several parallel vectors. Is there anything I can do to prevent this upheaval?

Answer 1

To answer the question that is asked in the title. The reason for this is that at some points of the curve the up (1,0,0) vector and the tangent are parallel. This means that their cross product is zero, and the construction of a quaternion fails.

You could follow WestLangley's suggestion. You really want the upward direction to be normal for the plane the track is in.

Quaternion rotation is difficult to understand that the setFromAxisAngle function rotates around an axis by a given angle.

If the track lies in the XY plane, then we want to rotate around the Z axis. To find the angle, use Math.atan2 to find the angle of the tangent

 var angle = Math.atan2(tangent.y,tangent.x); 

combining this set

 var ZZ = new THREE.Vector3( 0, 0, 1 ); 

and

 tangent = spline.getTangentAt(counter).normalize(); var angle = Math.atan2(tangent.y,tangent.x); box.quaternion.setFromAxisAngle(ZZ, angle); 

If the track leaves the XY plane, the situation will become more complicated.