Javascript WebGL交互，旋转后平移

在WebGL示例的上下文中，我在理解旋转和平移方面遇到了一些问题

发生了什么事： 我有一个示例程序，可以让我围绕三角形的中心旋转一个三角形，并在二维平面上进行平移。下面的代码正是这样做的（使用glmatrix libs）。modelViewMatrix应用于三角形顶点

问题： 如果三角形旋转180°，则平移错误。当然，仍然可以移动三角形，但方向是颠倒的。如果我向上拖动三角形，对象实际上会进一步移动到屏幕底部

问题： 这里发生了什么，为什么会这样？我需要做什么来纠正这种行为？我希望能够拖动三角形，不管它旋转了多少，平移轴应该是一致的

提前感谢您的回复，我相信对于熟悉整个转换内容的人来说，这是一个简单的问题。：）

---

原因是您的

modelViewMatrix

正在累积所有转换的组合

旋转函数通常围绕局部原点旋转（无论在应用时是什么）。当进行一些平移时，将围绕原点移动，因此旋转的行为将不同

我不确定“glmatrix”库和您使用的着色器，但是如果两者都遵循默认的GL约定，您也会产生这样的效果，即变换以相反的顺序应用，因此

rotate(...);
translate(...)

先平移然后旋转

可以通过分别跟踪方向和位置来避免这种情况，即定义

位置

向量和

旋转矩阵

矩阵，并相应地更新它们。对于绘图，可以将它们组合到modelview矩阵中，如

 modelViewMatrix=viewMatrix * translate(position) *  rotationMatrix

---

（假设上面再次描述了约定）。

这里有一篇关于。也许会有帮助？好吧，通过将当前位置存储在单独的vec3中，我能够解决这个问题。谢谢

 modelViewMatrix=viewMatrix * translate(position) *  rotationMatrix