Three.js - 将网格速度转换为网格旋转

Suppose I have a three.js mesh, and a velocity vector3.

假设我有一个three.js网格和一个速度矢量3。

The velocity is being altered elsewhere, and then added to the mesh.position every frame.

速度在其他地方被改变,然后每帧添加到mesh.position。

What I want is for the mesh.rotation to correspond to the velocity, i.e, the mesh is an arrow that always points in the direction it's going in.

我想要的是mesh.rotation对应于速度,即网格是一个总是指向它进入的方向的箭头。

Here are two approaches I've tried - which get the mesh rotating yeah, but just at the wrong angles and backwards and everything.

这是我尝试过的两种方法 - 让网格旋转是的,但只是在错误的角度和向后以及一切。

//this doesn't work
mesh.rot.x = Math.atan2( vel.y, vel.z );
mesh.rot.y = -Math.atan2( vel.x, vel.z );
mesh.rot.z = Math.atan2( vel.x, vel.y );

//got this from a semi-related * question; also doesn't work
mesh.rot.y = Math.asin( vel.z );
mesh.rot.z = Math.atan2( vel.y, vel.x );

var bankVec = new Vector3( -vel.y, vel.x, 0 );
var upVec = new Vector3( dot( bankVec, vel ) );

mesh.rot.x = Math.atan2(dot(bankVec, vel) / dot(upVec, vel),abs(bankVec)*abs(upVec));

I don't really get vector maths.

我真的没有得到矢量数学。

I'm now at the stage where I'm just arbitrarily changing signs and swapping arguments around, hoping for the best. So any kind of explanation as to how I should be doing this would be much appreciated.

我现在正处于这样一个阶段:我只是随意改变标志并交换争论,希望能够做到最好。因此,我将非常感谢任何关于如何做到这一点的解释。

Not really looking for code, just looking for the relevant equation of dot products, cross products, atan2's, whatever.

不是真的在寻找代码,只是寻找点积,交叉积,atan2等的相关方程式。

1 个解决方案

#1

You can construct a rotation matrix from the normalized velocity vector. The vector, normalized, is 1 axis. Then you pick a 2nd axis somehow. Then you do a cross product to find the 3rd axis. Finally do a cross product between the first and 3rd to get the final 2nd axis.

您可以从归一化的速度矢量构造旋转矩阵。归一化的向量是1轴。然后你以某种方式选择第二轴。然后你做一个十字产品来找到第三个轴。最后在第一个和第三个之间做一个交叉积,得到最后的第二个轴。

Then you construct a 3x3 matrix from the 3 vectors (i can't remember their order at the moment, but something like [x1,y1,z1,x2,y2,z2,x3,y3,z3]).

然后你从3个向量构造一个3x3矩阵(我现在不记得它们的顺序,但是像[x1,y1,z1,x2,y2,z2,x3,y3,z3]这样的东西)。

Another method is the Quaternion class:

另一种方法是Quaternion类:

.setFromUnitVectors ( vFrom, vTo )

.setFromUnitVectors(vFrom,vTo)

Sets this quaternion to the rotation required to rotate direction vector vFrom to direction vector vTo. Adapted from http://lolengine.net/blog/2013/09/18/beautiful-maths-quaternion-from-vectors. vFrom and vTo are assumed to be normalized.

将此四元数设置为将方向向量vFrom旋转到方向向量vTo所需的旋转。改编自http://lolengine.net/blog/2013/09/18/beautiful-maths-quaternion-from-vectors。假设vFrom和vTo被标准化。

http://threejs.org/docs/#Reference/Math/Quaternion

Since internally three.js likes to use quaternions, this may be a good method. If your arrow is an upward pointing arrow, you probably want vFrom=[0,1,0], vTo=velocityVector.normalize();

由于内部three.js喜欢使用四元数,这可能是一个很好的方法。如果你的箭头是向上箭头,你可能想要vFrom = [0,1,0],vTo = velocityVector.normalize();

#1