将对象的旋转定向到 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 example

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

编辑：[删除过时的小提琴]

three.js r.69