三维空间中的相机视角：up、position、lookAt详解

2023-11-03 03:59:43

前言

在三维空间中，相机的视角控制至关重要。在WebGL和three.js中，相机由三个向量参数定义：up、position和lookAt。理解这三个参数之间的关系对于操控相机视角、创建逼真的3D场景至关重要。本文将通过形象的模型展示，深入浅出地阐述这三个向量的作用。

相机的up向量

up 向量定义了相机在垂直方向上的朝向。它是一个单位向量，指向相机的上方。这意味着，如果我们沿着up向量前进，我们会看到相机上方。up向量通常与世界空间中的Y轴对齐，但这并不是强制要求的。我们可以通过设置相机的up向量来改变相机的垂直方向，从而控制相机的俯仰角度。

相机的position向量

position 向量定义了相机的在三维空间中的位置。它是一个三维向量，表示相机的x、y和z坐标。通过设置position向量，我们可以移动相机，从不同的角度观察场景。

相机的lookAt向量

lookAt 向量定义了相机正在看向的点。它也是一个三维向量，表示相机注视点的x、y和z坐标。通过设置lookAt向量，我们可以控制相机的旋转，让它看向特定的目标。

相机三个向量的关系

up、position和lookAt 这三个向量共同定义了相机的视角。up向量确定了相机的垂直朝向，position向量确定了相机的空间位置，lookAt向量确定了相机的注视方向。这三个向量共同构成一个右手坐标系，其中up向量是y轴，position向量是原点，lookAt向量是z轴。

实例演示

为了更直观地理解这三个向量的作用，我们使用three.js创建了一个简单的场景。场景中有一个立方体和一个相机。我们可以通过修改相机的三个向量参数来控制相机的视角。

// 创建场景
const scene = new THREE.Scene();

// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;
scene.add(camera);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 修改相机的三个向量参数
  camera.position.x += 0.01;
  camera.position.y += 0.01;
  camera.lookAt(cube.position);

  // 渲染场景
  renderer.render(scene, camera);
}

animate();