将对象的旋转方向调整为THREE.JS中的样条点切线

Question

我正在使用SplineCurve3仅在X轴和Y轴上绘制一条线,我有一个立方体成功动画沿着这条线使用spline.getPoint(t),其中t是0-1的时间.我试图通过使用点积的Y向量将立方体定向到线.

它几乎是对齐的,但是有点微不足道.我以为我会使用Y矢量的点积和当前点的切线作为旋转四元数的角度.

这是我的渲染功能:

function render() {

    var updateMatrix = new THREE.Matrix4(); 
    updateMatrix.setPosition(spline.getPoint(t));

    var angle = new THREE.Vector3(0,1,0).dot(spline.getTangent(t).normalize());

    var quat = new THREE.Quaternion;
    quat.setFromAxisAngle(new THREE.Vector3(0,0,1), angle);
    updateMatrix.setRotationFromQuaternion(quat);

    marker.rotation.getRotationFromMatrix(updateMatrix);
    marker.matrixWorld = updateMatrix;

    t = (t >= 1) ? 0 : t += 0.002;

    renderer.render(scene, camera); 
}

这是一个演示我的问题的小提琴,有人能告诉我旋转方面出了什么问题吗？

你可以编辑我的 - jsfiddle示例

Answer 1

作为一个经验法则,最好不要乱用object.matrix直接,而不是仅仅设定目标position,rotation和scale.让库处理矩阵操作.你需要拥有matrixAutoUpdate = true;.

要处理旋转部分,首先得到曲线的切线.

tangent = spline.getTangent( t ).normalize();

您想要旋转对象,使其向上矢量(局部y向量)指向曲线切线向量的方向.首先计算轴旋转.轴是垂直于由向上矢量和切向量定义的平面的矢量.您使用交叉产品来获取此向量.

axis.crossVectors( up, tangent ).normalize();

请注意,在您的情况下,由于样条曲线位于垂直于z轴的平面中,因此刚刚计算的轴将与z轴平行.但是,它可能指向正z轴或负z轴的方向 - 它取决于切向量的方向.

现在计算向上矢量和切向量之间的弧度角度.向上矢量和切线矢量的点积给出了它们之间角度的余弦(因为两个矢量都是单位长度).然后你必须采用弧余弦来获得角度.

radians = Math.acos( up.dot( tangent ) );

现在,从轴和角度提取四元数.

marker.quaternion.setFromAxisAngle( axis, radians );

编辑:更新小提琴:http://jsfiddle.net/SCXNQ/891/ for three.js r.69