6. 深入理解透视相机和视椎体

对于刚接触 Three.js 的同学来说，透视相机的视椎体确实是个比较难理解的概念。

这节我们把它可视化的在 3D 场景中展示出来，这样就容易理解了。

创建项目：

mkdir perspective-camera
cd perspective-camera
npm init -y

安装用到的 ts 类型：

npm install --save-dev @types/three

和之前一样，创建 index.html，引入 three.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <script type="importmap">
    {
        "imports": {
            "three": "https://esm.sh/three@0.174.0/build/three.module.js",
            "three/addons/": "https://esm.sh/three@0.174.0/examples/jsm/"
        }
    }
    </script>
    <script type="module" src="./index.js"></script>
</body>
</html>

创建 index.js

import * as THREE from 'three';
import {
    OrbitControls
} from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)

function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();

document.body.append(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

创建 Scene、Camera、Renderer，还有 OrbitContols 轨道控制器。

跑一下：

npx live-server

要看视椎体的话，我们需要创建另一个相机，用这个相机来观察：

Three.js 提供了一个 CameraHelper 来画视椎体，传入 camera 就行：

我们单独创建一个 PerspectiveCamera，传入 CameraHelper：

把 AxesHelper 注释掉，不然比较乱。

const camera2 = new THREE.PerspectiveCamera(20, 16 / 9, 100, 300);
const cameraHelper = new THREE.CameraHelper(camera2);
scene.add(cameraHelper);

现在就能看到视椎体了：

这里先顺便说下 OrbitContols 的操作：

鼠标左键拖动可以上下左右旋转：

2025-03-29 09.31.47.gif

鼠标右键拖动可以平移：

2025-03-29 09.34.56.gif

鼠标滚轮可以缩放：

2025-03-29 09.35.54.gif

当然，你用触摸板会有和鼠标对应的操作。

然后来说回这个视椎体：

第一个参数是角度，第二个参数是宽高比，第三个是近裁截面的距离，第四个参数是远裁截面的距离。

这些参数是怎么影响这个视椎体的呢？

我们用 dat.gui 来可视化调试下：

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const camera2 = new THREE.PerspectiveCamera(20, 16 / 9, 100, 300);
let cameraHelper = new THREE.CameraHelper(camera2);
scene.add(cameraHelper);

const gui = new GUI();
function onChange() {
    camera2.updateProjectionMatrix();
    cameraHelper.update();
}
gui.add(camera2, 'fov', [30, 60, 10]).onChange(onChange);
gui.add(camera2, 'aspect', {
    '16/9': 16/9,
    '4/3': 4/3
}).onChange(onChange);
gui.add(camera2, 'near', 0, 300).onChange(onChange);
gui.add(camera2, 'far', 300, 800).onChange(onChange);