如何在 mousedrag 上围绕 webgl 中的场景旋转（模拟围绕某个位置移动的相机）

发布于 2024-10-29 04:59:43 字数 856 浏览 6 评论 0原文

好的，所以我在过去的几个小时里一直在阅读，我已经成功地使用以下矩阵计算让鼠标拖动在 x 轴上工作，但在 y 轴上却没有运气：在哪里 newX = 新的鼠标 X 坐标 previousX = 上次更新时的鼠标 X 坐标位置=相机位置 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 的矩阵我已经使用了“基本旋转”下的矩阵，并且

我确信这之前已经完成过，任何帮助将不胜感激。

干杯，乔什

原文

Okay,
So I have been reading for the past few hours and I have managed to get the mouse drag to work on the x axis using the following matrix computation, but no luck with the y axis:
where
newX = new mouse X coord
previousX = mouse X coord at last update
position = camera position
mvMatrix = model view matrix or 'world matrix'

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
)

*Note this uses the glMatrix Library (http://code.google.com/p/glmatrix/)

And also in order to always face the position 0,0,0

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

I got the matrix from http://en.wikipedia.org/wiki/Rotation_matrix
I have used the matrix under 'basic rotations' and Ry

I am sure this has been done before, any help would be apreciated.

Cheers, Josh

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

再见回来 2024-11-05 04:59:43

假设您想要一个自由移动的相机，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);

Assuming you want a free-moving camera, with the Z-axis as vertical - each frame, you can do something like this:

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

Where degToRad transforms degrees to radians. Then pass the modelViewMatrix and the projection matrix to the vertex shader, which can use:

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

回复收藏 0 原文

~没有更多了~