Camera WebGL FPS摄影机使用glMatrix.js沿局部轴而不是世界轴移动

我正在尝试在WebGL中制作FPS相机。 当我从初始位置移动摄影机，然后旋转时，摄影机将沿开始位置而不是新位置移动。 使用glMatrix.js库进行平移和旋转

我有以下变量：

var rotateY = 0;  // For rotating along the Y axis
var fronBackMovement = 0;   // Front and back movement
var sideMovement  = 0;  // Movement from side to side

键盘事件：

// Movement
if( key.w == true ){
    fronBackMovement += 5;
}
if( key.a == true ){
    sideMovement += 5;
}
if( key.s == true ){
    fronBackMovement -= 5;
}
if( key.d == true ){
    sideMovement -= 5;
}

鼠标移动：

// Rotation
if( mouse.movementX != 0 ){
    rotateY += mouse.movementX;  // mouse.movementX is screen movement of the cursor
}

平移和旋转：

camera.matrix = mat4.fromTranslation( mat4.create() ,vec3.fromValues(sideMovement,0,fronBackMovement) )
camera.matrix = mat4.rotateY(camera.matrix,camera.matrix,rotateY )

---

相机通常向下看-Z轴，所以要向前移动，只需将相机的Z轴添加到您的位置即可。如果不想垂直移动，则将Y分量归零并进行规格化。最后乘以你想要的速度

相机的x轴包含侧面移动方向，因此您可以对其执行相同的操作

const cameraPosition = vec3.create();
const tempForwardDirection = vec3.create();
const tempSideDirection = vec3.create();
...


tempForwardDirection[0] = camera.matrix[8];
tempForwardDirection[1] = 0;  // camera.matrix[9];
tempForwardDirection[2] = camera.matrix[10];
vec3.normalize(tempForwardDirection, tempForwardDirection)

tempSideDirection[0] = camera.matrix[0];
tempSideDirection[1] = camera.matrix[1];
tempSideDirection[2] = camera.matrix[2];

vec3.scaleAndAdd(
    cameraPosition,
    cameraPosition,
    tempForwardDirection, 
    -fronBackMovement);
vec3.scaleAndAdd(
    cameraPosition,
    cameraPosition,
    tempSideDirection,
    sideMovement)

camera.matrix = mat4.fromTranslation(camera.matrix, cameraPosition);
camera.matrix = mat4.rotateY(camera.matrix,camera.matrix,rotateY);

设rotateY=0；//用于沿Y轴旋转 设fronBackMovement=0；//前后运动 设侧移=0；//左右移动 const cameraPosition=vec3.create； const tempForwardDirection=vec3.create； const tempSideDirection=vec3.create； 常数照相机={ 矩阵：mat4.create， }; 常数鼠标={ movementX:0， }; const gl=document.querySelectorcanvas.getContextwebgl； 常数vs=` 均匀mat4 u_世界视图投影； 均匀mat4-u_-world逆变换； 属性向量4位置； 属性向量3正常； 可变vec3 v_正常； 真空总管{ gl_位置=u_世界视图投影*位置； v_法线=u_WorldInverseTransfose*vec4normal，0.xyz； } `; 常数fs=` 精密中泵浮子； 可变vec3 v_正常； 均匀vec3 u_lightDir； 均匀的vec4 u_颜色； 真空总管{ vec3 norm=正常化EV_normal； 浮动灯光=dotu_lightDir，标准*.5+.5； gl_FragColor=vec4u_color.rgb*灯光，u_color.a； } `; const progInfo=twgl.createProgramInfogl[vs，fs]； const bufferInfo=twgl.primitives.createCubeBufferInfogl，1； 常量投影=mat4.create； const view=mat4.create； const viewProjection=mat4.create； const world=mat4.create； const worldwiewprojection=mat4.create； const worldInverse=mat4.create； 常量WorldInverseTransfose=mat4.create； 常数fov=degToRad90； 常数zNear=0.1； 常数zFar=100； const lightDir=vec3.normalizevec3.create[1,2,3]； 常量键={}； 设px=0； 设py=0； 设pz=0； 设elev=0； 设ang=0； 让滚动=0； 恒速=1； 恒转速=90； 然后设=0； 函数rendernow{ 现在*=0.001；//秒； 常数deltaTime=现在-那时； 然后=现在； twgl.resizeCanvasToDisplaySizegl.canvas； gl.viewport0，0，gl.canvas.width，gl.canvas.height； gl.enablegl.DEPTH_测试； gl.enablegl.CULL_面； gl.useProgramprogInfo.program； const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight； mat4.透视投影、视野、纵横比、zNear、zFar； fronBackMovement=0； 侧移=0； 如果key.w==true{ fronBackMovement=5*deltaTime； } 如果key.a==true{ 侧移=-5*增量时间； } 如果key.s==true{ fronBackMovement=-5*deltaTime； } 如果key.d==true{ 侧移=5*deltaTime； } //轮换 如果mouse.movementX！=0{ rotateY+=mouse.movementX/200；//mouse.movementX是光标在屏幕上的移动 mouse.movementX=0； } tempForwardDirection[0]=摄像机矩阵[8]； tempForwardDirection[1]=0；//camera.matrix[9]； tempForwardDirection[2]=摄像机矩阵[10]； vec3.normalizetempForwardDirection、tempForwardDirection tempSideDirection[0]=摄像机矩阵[0]； tempSideDirection[1]=摄像机矩阵[1]； tempSideDirection[2]=摄像机矩阵[2]； vec3.scaleAnd 摄像位置， 摄像位置， 前进方向， -蛙背运动； vec3.scaleAnd 摄像位置， 摄像位置， 临时侧向， 侧移 camera.matrix=mat4.fromTranslationcamera.matrix，cameraPosition； camera.matrix=mat4.rotateYcamera.matrix，camera.matrix，rotateY； mat4.VIEW，camera.matrix； mat4.多视图投影、投影、视图； 对于设z=-1；z{ mouse.movementX=e.movementX； }; 函数degToRadd{ 返回d*Math.PI/180； } 正文{页边距：0；} 画布{宽度：100vw；高度：100vh；显示：块；} 前{位置：绝对；左：1em；顶部：0；}

---

由于某种原因，我仍然有相同的相机运动