如何在WebGL中实现围绕场景旋转以模拟相机围绕位置移动的效果？

Question

好的，我已经阅读了几个小时，并成功使用以下矩阵计算使鼠标拖动在x轴上工作，但在y轴上没有成功： 其中 newX = 新的鼠标X坐标 previousX = 上次更新时的鼠标X坐标 position = 相机位置 mvMatrix = 模型视图矩阵或'世界矩阵'

angle = 0.01*(newX-previousX);
rM = mat4.create();
mat4.identity(rM);

rM[0] = Math.cos(angle);
rM[2] = Math.sin(angle);
rM[8] = -Math.sin(angle);
rM[10] = Math.cos(angle);

mat4.multiplyVec3(
    rM,
    position,
    position
)

*注意，这里使用了glMatrix库（http://code.google.com/p/glmatrix/）

同时为了始终面向位置0,0,0

mat4.lookAt(
    position,
    vec3.create([0, 0, 0]),
    vec3.create([position[0], position[1]+1, position[2]]),
    mvMatrix
);

我从http://en.wikipedia.org/wiki/Rotation_matrix获取了矩阵。 我使用了“基本旋转”和Ry下的矩阵。 我相信这已经被做过了，任何帮助将不胜感激。 谢谢，Josh

- Josh Mc

---

这个我帮不了你，但也许你可以从 https://github.com/mrdoob/three.js 获取一些信息。 - Han Dijk

Answer 1

假设你想要一个自由移动的摄像机，以Z轴为垂直方向 - 每一帧，你可以这样做：

    mat4.identity(viewMatrix); // 重置视图矩阵
    mat4.translate(viewMatrix, [x,y,z]); // 平移视图
    mat4.rotate(viewMatrix, degToRad(90-pitch), [-1, 0, 0]); // 绕X轴旋转
    mat4.rotate(viewMatrix, degToRad(yaw), [0, 0, 1]); // 绕Z轴旋转
    mat4.multiply(viewMatrix,modelMatrix,modelViewMatrix); // 变换模型视图矩阵

其中，degToRad将角度转换为弧度。然后将modelViewMatrix和projectionMatrix传递给顶点着色器，顶点着色器可以使用以下代码：

    attribute vec3 aVertexPosition; // 顶点坐标属性
    uniform mat4 modelViewMatrix; // 模型视图矩阵
    uniform mat4 projectionMatrix; // 投影矩阵
    gl_Position = projectionMatrix * modelViewMatrix * vec4(aVertexPosition, 1.0);

- Roderick