three.js相机的基本信息和常见的API

前端

2023-12-20 07:34:50

相机是Three.js中一个非常重要的类，它负责将场景中的物体投影到画布上。Three.js中提供了两种类型的相机：透视相机和正交相机。

透视相机

透视相机是一种最常用的相机类型，它模拟了人眼的视角。透视相机的投影方式是将场景中的物体投影到一个三维空间中，然后将这个三维空间投影到一个二维平面（画布）上。透视相机具有以下属性：

位置：相机的在场景中的位置
旋转：相机的旋转角度
焦距：相机的焦距，单位是毫米
视场角：相机的视场角，单位是角度
近裁剪平面：相机的近裁剪平面，低于这个平面的物体将不被渲染
远裁剪平面：相机的远裁剪平面，高于这个平面的物体将不被渲染

正交相机

正交相机是一种特殊的相机，它将场景中的物体以平行投影的方式投影到画布上。正交相机具有以下属性：

位置：相机的在场景中的位置
旋转：相机的旋转角度
左：相机的左边界
右：相机的右边界
上：相机的上边界
下：相机的下边界
近裁剪平面：相机的近裁剪平面，低于这个平面的物体将不被渲染
远裁剪平面：相机的远裁剪平面，高于这个平面的物体将不被渲染

相机与世界坐标

相机的位置和旋转决定了世界坐标系相对于相机的方向。世界坐标系中的一个点被投影到画布上的位置是由相机的投影矩阵决定的。投影矩阵是一个4x4的矩阵，它将世界坐标中的一个点投影到一个齐次坐标中的点。齐次坐标中的点再除以最后一个分量，就得到了最终的投影点。

相机的常见API

camera.position：获取或设置相机的在场景中的位置。
camera.rotation：获取或设置相机的旋转角度。
camera.fov：获取或设置相机的视场角。
camera.near：获取或设置相机的近裁剪平面。
camera.far：获取或设置相机的远裁剪平面。
camera.lookAt()：使相机看向一个指定的点。
camera.updateProjectionMatrix()：更新相机的投影矩阵。

相机的使用

相机的使用非常简单，只需要将相机添加到场景中，然后调用camera.updateProjectionMatrix()方法更新相机的投影矩阵即可。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
scene.add(camera);

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

const animate = function () {
  requestAnimationFrame(animate);

  camera.updateProjectionMatrix();

  renderer.render(scene, camera);
};

animate();