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

Question

我正在尝试使用 WebGL 中的 viewAt 函数并使用四元数进行旋转来实现 3D 相机。到目前为止，我可以通过旋转“向上”向量来实现滚动功能，但是，我无法让lookAt点改变任何东西。

这是我的基本设置代码

向上是(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

要使用“看”，您需要空间中的一个点来嗯，看。

例如，将所有矩阵相乘以获得世界矩阵，然后仅提取翻译（元素 12,13,14）并将它们用作您的 viewAt 视点目标。

因此，您可以在矩阵计算中使用四元数，但最后您需要在世界空间中找到一个您想要查看的点。