相机多次旋转

Question

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

我正在做的是：

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);

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