将对象的旋转定向到 THREE.JS 中的样条点切线 [英] Orient object's rotation to a spline point tangent in THREE.JS

问题描述

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

I am using SplineCurve3 to plot a line only on the X and Y axis, I have a cube successfully animating along this line by using spline.getPoint(t) where t is 0-1 in time. I am trying to orient the cube to the line via its up vector which is Y using the dot product.

它几乎对齐，但稍微有点偏.我想我会使用 Y 向量和当前点的切线的点积作为旋转四元数的角度.

It is almost aligned but ever so slightly out. I thought that I would use the dot product of the Y vector and the tangent of the current point as the angle to rotate a quaternion to.

这是我的渲染函数:

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

这是一个演示我的问题的小提琴，谁能告诉我旋转方面哪里出了问题?

And here is a fiddle demonstrating my problem, can anyone tell me where I'm going wrong with the rotation aspect?

您可以编辑我的 - jsfiddle 示例

推荐答案

根据经验，最好不要直接弄乱object.matrix，而只是设置对象position、rotation 和 scale.让库处理矩阵操作.你需要有 matrixAutoUpdate = true;.

As a rule of thumb, it is best not to mess with the object.matrix directly, and instead just set the object position, rotation, and scale. Let the library handle the matrix manipulations. You need to have matrixAutoUpdate = true;.

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

To handle the rotation part, first get the tangent to the curve.

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

您想要旋转对象，使其向上向量(局部 y 向量)指向曲线切向量的方向.首先计算要绕其旋转的轴.轴是垂直于由向上矢量和切线矢量定义的平面的矢量.你使用叉积来得到这个向量.

You want to rotate the object so that it's up-vector (local y-vector) points in the direction of the curve tangent vector. First calculate the axis to rotate around. The axis is a vector perpendicular to the plane defined by the up-vector and the tangent vector. You use the cross-product to get this vector.

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

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

Note, in your case, since the spline lies in a plane perpendicular to the z-axis, the axis just computed will be parallel to the z-axis. However, it may point in the direction of the positive z-axis or the negative z-axis -- it depends on the direction of the tangent vector.

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

Now calculate the angle in radians between the up vector and the tangent vector. The dot-product of the up vector and the tangent vector give the cosine of the angle between them (since both vectors are of unit length). You then have to take the arc-cosine to get the angle itself.

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

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

Now, extract the quaternion from the axis and angle.

marker.quaternion.setFromAxisAngle( axis, radians );

[删除过时的小提琴]

three.js r.69

three.js r.69

这篇关于将对象的旋转定向到 THREE.JS 中的样条点切线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！