Matrix 定向对象'；s旋转到THREE.JS中的样条曲线点切线

我正在使用仅在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); 
}

这是一把小提琴演示了我的问题，有人能告诉我旋转方面哪里出了问题吗

---

您可以编辑my-

作为经验法则，最好不要直接弄乱

对象.matrix

，而只需设置对象的

位置

、

旋转

和

缩放

。让库处理矩阵操作。您需要有

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
使用r52编辑带演示链接的答案，现在使用setEulerFromRotationMatrix（r50）代替getRotationFromMatrix（r49）。在threejs的最新版本中，axis.cross必须改为axis.crossVectors。（我已经做了编辑…）这里和那里可能还有其他细微的变化？回答得很好，谢谢你提供了一个工作示例！fiddle不再有效我知道这是一篇老文章，但我想扔掉一个其他人可能会觉得有用的小版本：
code obj.position.copy（spline.getPoint（t））；obj.lookAt（spline.getTangent（t）.add（obj.position））