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

标签 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和投影矩阵传递给顶点着色器,可以使用:

属性 vec3 aVertexPosition;
统一 mat4 模型 View 矩阵;
均匀 mat4 投影矩阵;
gl_Position = projectionMatrix* modelViewMatrix* vec4(aVertexPosition, 1.0);

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

相关文章:

javascript - 如何在不使用按钮的情况下使 Bootstrap 下拉? ( Angular 4+)

javascript - 如何隐藏表单中的所有输入元素?

javascript - `attr(' 已检查 ', false)` 不适用于 IE6

javascript - 状态已保存,但说它没有

c++ - 从 JPEG 图像( Gamma 校正等)中提取亮度的正确方法是什么?

安卓相机 : Empty file in onActivityResult method

iphone - 在 XCode 中模拟加速度计、麦克风和摄像头

python - NumPy矩阵加列向量

opencv - 如何在opencv中计算复数的绝对值

python - 将两个具有不同维度的矩阵相加,并在总矩阵中保留标签