我在WebGL示例的上下文中理解旋轉和翻譯的東西時有點麻煩。WebGL交互,旋轉後翻譯
發生了什麼事: 我有一個示例程序,讓我圍繞它的中心旋轉一個三角形,並在2D平面上翻譯它。下面的代碼確實如此(使用glmatrix庫)。 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;
}
這是關於[矩陣運算如何工作]的文章(http://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html)。也許它會有幫助? – gman