Question

我在理解WebGL示例的上下文中的旋转和翻译时遇到了一点麻烦。

发生了什么： 我有一个示例程序，允许我围绕其中心旋转三角形并在2D平面上进行平移。下面的代码就是这样（使用glmatrix libs）。 modelViewMatrix应用于三角形顶点。

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

问题： 这里发生了什么，为什么会发生这种情况？我需要做些什么来纠正这种行为？我想能够拖动三角形，无论它旋转多少，平移轴应该是一致的。

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

var modelViewMatrix = mat4.create();

function mouseDown(mouseEvent){
    isMouseDown = true;
    g_drawInterval = setInterval(redraw, 40);
}

var translationFactor = 0.01;
var rotationFactor = 0.01;  

function mouseMove(mouseEvent){
    if (isMouseDown){
         deltaX = mouseEvent.clientX - oldPosX;
         deltaY = mouseEvent.clientY - oldPosY;
    if (mouseEvent.button === 0) // left mouse button
         mat4.translate(modelViewMatrix, modelViewMatrix,
         [deltaX * translationFactor, -deltaY * translationFactor, 0]);
     else
         mat4.rotateZ(modelViewMatrix, modelViewMatrix,
         deltaX * rotationFactor -deltaY * rotationFactor);
     }
     oldPosX = mouseEvent.clientX;
     oldPosY = mouseEvent.clientY;
 }

Answer 1

原因是您的modelViewMatrix 正在累积所有转化的成分。

旋转功能通常围绕本地原点旋转（无论是什么，在应用它时）。如果你有一些翻译，你可以改变原点，所以旋转的行为会有所不同。

我不确定＆＃34; glmatrix＆＃34; lib和你使用的着色器，但如果两者都遵循默认的GL约定，你也会有相反的顺序应用转换的效果，所以

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

首先翻译，然后旋转。

您可以通过分别跟踪方向和位置来避免这种情况，即定义position向量和rotationMatrix矩阵，并相应地更新它们。对于绘图，您可以将它们组合到模型视图矩阵，如

modelViewMatrix=viewMatrix * translate(position) * rotationMatrix

（假设上述惯例再次出现）。

WebGL交互，旋转后翻译

1 个答案: