ViewMatrix计算会弄乱模型

我有一个WebGL应用程序,它呈现一个立方体数组,每个立方体的高度不同。为了调整它们的大小,我使用变换矩阵来缩放立方体。我还有一个摄像头,可以用键盘移动。

为了计算模型矩阵,我使用以下代码:

let matrix = matrix4Identity();
matrix = matrix4Translate(matrix, this.position);
matrix = matrix4Rotate(matrix, this.rotation[0], [1, 0, 0]);
matrix = matrix4Rotate(matrix, this.rotation[1], [0, 1, 0]);
matrix = matrix4Rotate(matrix, this.rotation[2], [0, 0, 1]);
matrix = matrix4ScaleWithVector(matrix, this.scale);

let matrix = matrix4Identity();
matrix = matrix4Rotate(matrix, camera.rotation[0], [1, 0, 0]);
matrix = matrix4Translate(matrix, [camera.position[0], camera.position[1], camera.position[2]]);
return matrix4Inverse(matrix);

这是我使用的顶点着色器代码:

attribute vec3 vertices;
attribute vec3 normals;

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main(void) {
    vec4 worldPosition = modelMatrix * vec4(vertices, 1.0);
    vec4 modelPosition = viewMatrix * worldPosition;

    gl_Position = projectionMatrix * modelPosition;
}

但是,如果你移动相机,立方体就会被平移。因此,当你向上移动相机时,立方体的(视觉)Y位置会发生变化。此外,如果你旋转相机,它实际上会绕着立方体的X轴旋转。 但是,如果我移除模型矩阵中的缩放变换,块在移动相机时不会再改变它们的位置。

您可以在这里看到项目结果。 https://renuo.github.io/stayOFline/ 使用WASD在X和Z轴上移动,R向上移动,F向下移动,o+l旋转相机。

当第一次平移和旋转相机时,我得到以下行为:

您可以在下面查看整个代码 https://github.com/renuo/stayOFline/tree/gh-pages