使用 lookAt 在 WebGL 中创建旋转相机

Question

我正在尝试使用 WebGL 中的 lookAt 函数实现 3D 相机，并使用四元数进行旋转。到目前为止，我可以通过旋转 'up' 向量来实现滚动功能，但是，我无法通过观察点来更改任何内容。

这是我的基本设置代码

向上是 (0,1,0) viewDir 是 (0,0,-1) eyePt 是 (0,0,0)

   var transformVec = vec3.create();

   gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

   mat4.perspective(pMatrix, degToRad(45), gl.viewportWidth / gl.viewportHeight, 0.1, 400.0);

   quat.setAxisAngle(workingQuat, [0, 1, 0], degToRad(roll));
   quat.mul(globalQuat, globalQuat, workingQuat);
   vec3.transformQuat(up, up, globalQuat);

   vec3.add(viewPt, eyePt, viewDir);
   mat4.lookAt(mvMatrix, eyePt, viewPt, up);

   mvPushMatrix();
    // drawing terrain
   vec3.set(transformVec, 0.0, -0.25, -100.0);
   mat4.translate(mvMatrix, mvMatrix, transformVec);
   mat4.rotateX(mvMatrix, mvMatrix, degToRad(-75));
   mat4.rotateZ(mvMatrix, mvMatrix, degToRad(25));
   setMatrixUniforms();

   mvPopMatrix();

我想我对应该如何使用该功能感到困惑。我无法让相机看任何其他点。

Answer 1

要使用 look at，您需要 space 中的一个点，嗯，look at。

例如，将所有矩阵相乘得到一个世界矩阵，然后仅提取平移（元素 12、13、14）并将它们用作您的 lookAt 视点目标。

因此您可以在矩阵计算中使用四元数，但最后您需要在世界 space 中指出您想要查看的点。

使用 lookAt 在 WebGL 中创建旋转相机

Create a rotating camera in WebGL with lookAt

javascript

opengl-es

webgl