Question

我正在尝试在WebGL应用程序中进行一些简单的相机旋转（使用来自Learning WebGL的第10课），但我肯定做错了什么......我的意思是相机的水平移动似乎很好，移动时WASD似乎还可以，但是当我添加垂直移动时，在地图的某些点上，出现问题并且地图开始倾斜。我的错误在哪里？（演示是here）

我正在做的是：

function handleMouseMove(event) {
    var canvas = document.getElementById("quak-canvas"); 
    var newX = event.clientX;
    var newY = event.clientY;

    var newRotationMatrix = mat4.create();
    mat4.identity(newRotationMatrix);

    var deltaY = newY - lastMouseY;
    mat4.rotate(newRotationMatrix, degToRad(deltaY / 40), [1, 0, 0]);

    var deltaX = newX - lastMouseX;
    horizontalAngle = (event.pageX/(canvas.width/2))*180;
    mat4.rotate(newRotationMatrix, degToRad(deltaX / 3.75), [0, 1, 0]);

    mat4.multiply(newRotationMatrix, moonRotationMatrix, moonRotationMatrix);

    lastMouseX = newX
    lastMouseY = newY;

    window.moveBy(10, 10);
}

我认为有一些翻译缺失或类似的东西，但我尝试了一些组合，但它没有成功..

非常感谢谢尔盖。

Answer 1

首先，让我说你的演示实际上看起来对我好。也许它是受阻垂直旋转的副作用，但我看不到任何看起来太可怕的东西。您的代码在大多数情况下看起来也不错。我认为你的问题的核心可能是最后的矩阵乘法。事实上，你总是在构建前一帧的结果可能会导致一些复杂化。

在我的FPS移动代码中，我每帧都重新计算视图矩阵，如下所示：

 var viewMat = mat4.create();
 mat4.identity(viewMat);
 mat4.rotateX(viewMat, xAngle); // X angle comes from Y mouse movement
 mat4.rotateY(viewMat, yAngle); // Y angle comes from X mouse movement
 mat4.translate(viewMat, position);

当按下WASD时计算位置：

var dir = vec3.create();
if (pressedKeys['W']) { dir[2] -= speed; }
if (pressedKeys['S']) { dir[2] += speed; }
if (pressedKeys['A']) { dir[0] -= speed; }
if (pressedKeys['D']) { dir[0] += speed; }
if (pressedKeys[32]) { dir[1] += speed; } // Space, moves up
if (pressedKeys[17]) { dir[1] -= speed; } // Ctrl, moves down

// Create an inverted rotation matrix to transform the direction of movement by
var cam = mat4.create();
mat4.identity(cam);
mat4.rotateY(cam, -yAngle);
mat4.rotateX(cam, -xAngle);

// Move the camera in the direction we are facing
mat4.multiplyVec3(cam, dir); 
vec3.add(position, dir);

希望这有助于您为自己的代码获得可行的解决方案！

多次旋转相机

1 个答案: