WebGL 摄像头视角的奥秘

前端

2024-01-11 12:07:38

透视相机与正交相机

在 WebGL 中，透视相机和正交相机是两种不同的相机类型，它们具有不同的特性和用途。

透视相机 ：透视相机模仿了人眼看到的世界。它具有透视效果，因此离相机越近的物体看起来越大，离相机越远的物体看起来越小。透视相机通常用于创建 3D 场景。
正交相机 ：正交相机与透视相机不同，它不具有透视效果。所有物体无论距离相机有多远，看起来都具有相同的大小。正交相机通常用于创建 2D 场景或用户界面。

相机类型的选择

在选择相机类型时，您需要考虑以下因素：

场景类型 ：如果您要创建 3D 场景，则需要使用透视相机。如果您要创建 2D 场景或用户界面，则可以使用正交相机。
所需的视觉效果 ：如果您想要创建具有透视效果的场景，则需要使用透视相机。如果您想要创建不具有透视效果的场景，则可以使用正交相机。

在两种相机类型之间切换

在 WebGL 中，您可以在透视相机和正交相机之间切换。要切换相机类型，您可以使用 camera.type 属性。

camera.type = "perspective"; // 设置相机类型为透视相机
camera.type = "orthographic"; // 设置相机类型为正交相机

示例代码

以下是一个示例代码，展示了如何使用透视相机和正交相机创建 3D 场景。

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

// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建正交相机
var orthographicCamera = new THREE.OrthographicCamera(-10, 10, 10, -10, 0.1, 1000);
orthographicCamera.position.z = 5;

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

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

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

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  orthographicCamera.left = -width / 2;
  orthographicCamera.right = width / 2;
  orthographicCamera.top = height / 2;
  orthographicCamera.bottom = -height / 2;
  orthographicCamera.updateProjectionMatrix();
});

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  if (event.keyCode == 81) { // 按下 Q 键
    camera.type = "perspective";
  } else if (event.keyCode == 69) { // 按下 E 键
    camera.type = "orthographic";
  }
});