WebGL - 沿行进方向旋转对象答案

【问题标题】：WebGL - Rotating object in the direction it is travellingWebGL - 沿行进方向旋转对象
【发布时间】：2011-11-09 10:47:26
【问题描述】：

在本例中：http://deeplogic.info/project/webGL/

我怎样才能使物体沿其行进的方向旋转？

【问题讨论】：

我不确定我是否完全理解了这个问题——你的意思是像轮子一样在地面上旋转吗？如果是这样，那么我注意到链接的示例是 2d，您要保持这种方式还是添加第三维？
链接的例子是 3d 的，虽然它只是在 2d 平面上移动。所以绕z轴旋转。我想要做的是当矩形朝着我希望它指向那个方向的方向移动时

标签： javascript math opengl webgl three.js

【解决方案1】：

假设您的对象正在向 D 方向移动，那么您需要做的就是找到一个垂直于该方向的向量。如果你的运动只在一个平面上，你可以通过 D 与平面法线 N 的叉积来找到这个向量 E。

E = D × N

这将为您生成 3 个向量 D、E 和 N。归一化后，这些向量构成旋转坐标系的基础。您可以将它们放入 3×3 矩阵的列中

D_x E_x N_x
D_y E_y N_y
D_z E_z N_z

将此矩阵扩展为 4×4 同质矩阵

D_x E_x N_x 0
D_y E_y N_y 0
D_z E_z N_z 0
  0   0   0 1

您可以使用 glMultMatrix 将其传递给 OpenGL，以将其应用于矩阵堆栈。

【讨论】：

在这里的特殊情况下，物体沿 xy 平面移动，您可以更进一步，通过切换坐标和负坐标来获得正交，然后利用矩阵中的（非正式）对称性您正在构建的目标是仅对一个向量进行归一化。
@Tommy：如果你评估了在 XY 平面上对向量与 Z 的叉积，你会看到，这正是将要发生的事情。
我完全清楚这一点。即使在讨论一般情况时，特殊情况也是相关的。

【解决方案2】：

要让沿 (x, y) 方向移动的对象绕 z 旋转，您可以使用 Math.atan2(y,x) 方法。它将以弧度返回一个角度。 ES 2 之前的 OpenGL 约定是以度为单位工作的，但现在它取决于您必须将转换推送到顶点着色器的任何代码。不过，您可能想要进行转换，在这种情况下，只需将结果乘以 180（以度为单位的半圆）并除以 pi（以弧度为单位的半圆）。

【讨论】：

我已经厌倦了那些无名的三角函数。人，com'on线性代数并不难。请参阅我的答案以获得更直接的方法。
我已经厌倦了不需要平方根的结果，尽管我不认为三个三角函数（包括制作旋转矩阵）相对于三个平方根的效率没有明确的规则。进一步的理由：人们倾向于比线性代数更早地研究三角学，并且通过角度来解决涉及旋转概念的问题的更直接和具体的答案。
人们在线性代数之前首先做三角学正是问题所在。几乎每一个三角问题都可以用线性代数来表达。在旋转的情况下，角度只是缺少一些信息。表示旋转的唯一真正方法是使用 SU(2) 组的元素，它们是矩阵、四元数，或者在 2D 复数的情况下，它们是四元数的子集。在“让它指向它移动的方向”的情况下，你已经有了方向向量。
首先做一个 atan(x/y)，顺便说一下，它爆炸了 90°，然后返回 sin 和 cos 只是没有抓住重点。
如果您查看 main.js 中的代码，您会发现我确实尝试了两种方式，尽管我没有尝试将其转换回度数以便可以工作。看着棕褐色的图表，我猜它也会在 270 处爆炸？如果我只允许旋转 +/- 89 会起作用吗？