THREE.js：为什么我的对象在沿着样条线移动时会翻转？

Question

从我原来的帖子 Three.JS Object following a spline path - rotation / tangent issues & constant speed issue 开始，我仍然遇到对象在路径上的某些点翻转的问题。

在这个小提琴上查看这个发生的事情：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;
}

}

上面的代码是沿着定义的样条路径（在本例中为椭圆）移动我的对象的原因。 @WestLangley 提到：“警告：如果两个向量平行，则叉积的定义不明确。”。

如你所见，从路径的形状来看，我会遇到很多平行向量。我能做些什么来防止这种翻转发生吗？

Answer 1

回答标题中的为什么问题。它发生的原因是在曲线上的某些点，向量up (1,0,0) 和切线是平行的。这意味着它们的叉积为零并且四元数的构造失败。

您可以遵循 WestLangley 的建议。你真的希望向上方向是轨道所在平面的法线。

四元数旋转很难理解 setFromAxisAngle 函数围绕轴旋转给定角度。

如果轨道位于 X-Y 平面，那么我们将要围绕 Z 轴旋转。要查找角度，请使用Math.atan2 查找切线的角度

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

把这些放在一起

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

和

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

如果轨道离开 X-Y 平面，事情会变得更加棘手。