javascript 如何在 mousedrag 上围绕 webgl 中的场景旋转（模拟围绕某个位置移动的相机）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5512127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I rotate around a scene in webgl on mousedrag (emulating a camera moving around a position)
提问by Josh Mc
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'
好的，所以我过去几个小时一直在阅读，并且使用以下矩阵计算设法使鼠标拖动在 x 轴上工作，但 y 轴没有运气： where newX = new mouse X coord 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
)
*Note this uses the glMatrix Library (http://code.google.com/p/glmatrix/)
*注意这使用 glMatrix 库 (http://code.google.com/p/glmatrix/)
And also in order to always face the position 0,0,0
并且为了始终面对位置 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_matrixI have used the matrix under 'basic rotations' and Ry
我从http://en.wikipedia.org/wiki/Rotation_matrix得到了矩阵 我在“基本旋转”和 Ry 下使用了矩阵
I am sure this has been done before, any help would be apreciated.
我相信这之前已经完成了，任何帮助都会受到赞赏。
Cheers, Josh
干杯，乔希
采纳答案by Giles Thomas
Take a look at my WebGL lesson 11-- it rotates the object in the world instead of the camera, but you should just be able to switch the order in which you multiply newRotationMatrix and moonRotationMatrix to reverse that.
看看我的 WebGL 第 11 课——它旋转世界中的对象而不是相机，但您应该能够切换乘以 newRotationMatrix 和 moonRotationMatrix 的顺序来反转它。
回答by Roderick
Assuming you want a free-moving camera, with the Z-axis as vertical - each frame, you can do something like this:
假设你想要一个自由移动的相机，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);
Where degToRad transforms degrees to radians. Then pass the modelViewMatrix and the projection matrix to the vertex shader, which can use:
其中 degToRad 将度数转换为弧度。然后将modelViewMatrix和投影矩阵传递给顶点着色器，可以使用：
attribute vec3 aVertexPosition;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
gl_Position = projectionMatrix* modelViewMatrix* vec4(aVertexPosition, 1.0);
