Three.js（WebGL）透视视角和正交视角，以及透视转正交的视角切换代码

在Web开发中，Three.js是一个强大的3D图形库，可以给网页添加逼真的3D效果。其中，透视视角和正交视角是非常重要的概念，它们可以影响到网页中3D场景的呈现效果。本文将介绍Three.js中透视视角和正交视角的特点以及如何在它们之间切换。

透视视角

透视视角是一种模拟人眼视角的方式，它能够呈现出真实世界中的景深效果。当我们在看远处的物体时，它们会变得较小，而当我们靠近物体时，它们会变得较大。在Three.js中，我们可以通过设置摄像机的视角（FOV）、视野宽高比（aspect）、近处剪切面和远处剪切面来实现透视视角的效果。

以下是一个简单示例代码，展示了如何使用Three.js创建一个透视视角的场景：

```javascript

// 创建透视相机

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建场景

const scene = new THREE.Scene();

// 创建渲染器

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 创建一个立方体

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

// 设置相机位置

camera.position.z = 5;

// 渲染场景

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

```

上述代码首先创建了一个透视相机`PerspectiveCamera`，通过调整`FOV`参数可以改变透视程度。然后创建了一个场景，并将一个立方体对象添加到场景中。最后，通过渲染器`WebGLRenderer`将场景渲染到屏幕上。运行代码，你将看到一个旋转的立方体在屏幕上呈现出透视效果。

正交视角

正交视角是一种不具备景深效果的视角，在这种视角下物体的大小和距离与我们的观察角度无关。在Three.js中，我们可以通过设置摄像机的左右上下和近处远处的剪切面来实现正交视角的效果。正交视角主要用于制作2D风格的游戏或图形效果。

以下是一个简单示例代码，展示了如何使用Three.js创建一个正交视角的场景：

```javascript

// 创建正交相机

const camera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2,

window.innerHeight / 2, -window.innerHeight / 2, 1, 1000);

// 创建场景

const scene = new THREE.Scene();

// 创建渲染器

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 创建一个正方体

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

// 设置相机位置

camera.position.z = 5;

// 渲染场景

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

```

上述代码首先创建了一个正交相机`OrthographicCamera`，通过调整左右上下剪切面的位置和大小可以改变正交视角的效果。然后创建了一个场景，并将一个正方体对象添加到场景中。最后，通过渲染器`WebGLRenderer`将场景渲染到屏幕上。运行代码，你将看到一个旋转的正方体在屏幕上呈现出正交效果。

透视转正交的视角切换

在使用Three.js绘制3D场景时，我们常常需要在透视视角和正交视角之间切换。这可以通过改变摄像机的类型和参数来实现。

以下是一个示例代码，展示了如何在透视视角和正交视角之间切换：

```javascript

// 创建透视相机

const perspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建正交相机

const orthographicCamera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2,

window.innerHeight / 2, -window.innerHeight / 2, 1, 1000);

// 初始使用透视相机

let camera = perspectiveCamera;

// 切换视角

function switchCamera() {

if (camera instanceof THREE.PerspectiveCamera) {

camera = orthographicCamera;

} else {

camera = perspectiveCamera;

}

camera.position.copy(perspectiveCamera.position); // 复制透视相机位置

camera.rotation.copy(perspectiveCamera.rotation); // 复制透视相机旋转

updateProjectionMatrix(); // 更新投影矩阵

}

// 更新投影矩阵

function updateProjectionMatrix() {

const { left, right, top, bottom, near, far } = camera;

camera.projectionMatrix.makeOrthographic(left, right, top, bottom, near, far);

camera.updateProjectionMatrix();

}

// 在渲染循环中切换视角

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

```

上述代码通过创建透视相机`PerspectiveCamera`和正交相机`OrthographicCamera`，并使用一个变量`camera`来记录当前使用的相机。在`switchCamera`函数中，切换相机类型并复制透视相机的位置和旋转。在`updateProjectionMatrix`函数中，通过更新相机的投影矩阵来实现透视转正交的效果。最后，在渲染循环中，根据当前的相机类型渲染场景。

通过以上代码，你可以实现在透视视角和正交视角之间的切换。你可以尝试修改代码，调整相机参数和视角，观察渲染结果的变化。

本文介绍了Three.js中透视视角和正交视角的特点和用法，并演示了如何在两者之间切换。希望对你了解和使用Three.js有所帮助！