# WebGL视点与视线: 漫步在3D图形的迷人世界 #

前端

2023-10-15 13:21:55

WebGL 视点与视线：探索 3D 图形的奇妙世界

踏入令人惊叹的 3D 图形世界，WebGL 视点与视线是两大不可或缺的基石。它们决定了您在虚拟环境中的位置和视角，让您能够从不同角度欣赏三维场景，宛若亲临现场。

视点：您的摄像机驻留之处

视点就好比摄像机的位置，它定义了您作为观察者的位置。视点可以自由移动和旋转，让您从任意角度探索场景，尽情领略三维世界的魅力。

视线：探索三维世界的指引

视线是指摄像机的观察方向，从视点延伸到您想要观察的焦点。它决定了您所看到的场景范围，就像一条通往三维世界的隐形射线。

上方向：保持摄像机不会上下颠倒

上方向用于确定摄像机的朝上方向，它与视线和视点共同决定了摄像机的方向。通常情况下，上方向与世界坐标系的 y 轴平行，但您也可以根据需要进行调整。

lookAt 函数：让您的摄像机精准对焦

lookAt 函数是 WebGL 中设置摄像机视点和视线的关键函数，下面是它的源码分析：

function lookAt(eye, center, up) {
  // 计算摄像机到观察点的方向
  var eyeToCenter = normalize(subtract(center, eye));

  // 计算摄像机的上方向
  var up = normalize(up);

  // 计算摄像机的右方向
  var right = normalize(cross(eyeToCenter, up));

  // 计算摄像机的上方向
  up = normalize(cross(right, eyeToCenter));

  // 构造摄像机的模型矩阵
  var modelMatrix = [
    right[0], right[1], right[2], 0,
    up[0], up[1], up[2], 0,
    -eyeToCenter[0], -eyeToCenter[1], -eyeToCenter[2], 0,
    eye[0], eye[1], eye[2], 1
  ];

  // 设置模型矩阵
  gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
}