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

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

updated fiddle: http://jsfiddle.net/SCXNQ/891/ for three.js r.69

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