javascript - 如何在 webgl 中围绕 mousedrag 中的场景旋转(模拟相机在某个位置周围移动)

标签 javascript matrix camera rotation webgl

好的, 所以我在过去的几个小时里一直在阅读,我已经设法使用以下矩阵计算让鼠标拖动在 x 轴上工作,但在 y 轴上没有运气: 在哪里 newX = 新的鼠标 X 坐标 previousX = 上次更新时的鼠标 X 坐标 位置 = 相机位置 mvMatrix = 模型 View 矩阵或'世界矩阵'

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 下的矩阵

我确信以前有人这样做过,我们将不胜感激。

干杯,乔希

最佳答案

假设您想要一个自由移动的相机,Z 轴为垂直 - 每一帧,您可以执行如下操作:

    mat4.identity(viewMatrix);
    mat4.translate(viewMatrix, [x,y,z]);
    mat4.rotate(viewMatrix, degToRad(90-pitch), [-1, 0, 0]);
    mat4.rotate(viewMatrix, degToRad(yaw), [0, 0, 1]);
    mat4.multiply(viewMatrix,modelMatrix,modelViewMatrix);

degToRad 将度数转换为弧度。然后将modelViewMatrix和投影矩阵传递给顶点着色器,可以使用:

    attribute vec3 aVertexPosition;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    gl_Position = projectionMatrix* modelViewMatrix* vec4(aVertexPosition, 1.0);

关于javascript - 如何在 webgl 中围绕 mousedrag 中的场景旋转(模拟相机在某个位置周围移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5512127/

相关文章:

javascript - Google Maps Circle/MySQL 查询

latex - LaTeX 中小矩阵不会出现在同一行

c# - Unity ViewtoWorldPoint 不工作,我做错了什么?

Android Camera2 API 切换回 - 前置摄像头

c++ - GLM View 矩阵导致模型矩阵无效

c - 如何在V4L2中正确设置扩展控件?

javascript - 将不同大小的数组(但始终超过 20) trim 为特定长度 (10)

javascript - 如何使用Javascript仅获取除第一个td之外的前三个td标签

javascript - 从 DOM 中删除编辑器后如何删除 CKeditor 实例

matlab - 如何求伽罗瓦域矩阵的行秩?