Three.js - Convert mesh velocity to mesh rotation

2019-03-01 12:41发布

问题:

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

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

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.

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 stackoverflow 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.

回答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.

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]).

Another method is the Quaternion class:

.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.

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