如果你曾对着 Three.js 的相机参数抓耳挠腮，纳闷为什么一个小小的视角值能让三维世界乾坤颠倒，那多半是没搞懂正切函数在背后捣的鬼。这就像给相机装了副特殊眼镜，而正切函数就是验光师手里的度数表 ------ 看似简单的数字背后，藏着光与影的几何密码。
相机视野的底层逻辑：从瞳孔到矩阵
人类的眼睛堪称自然界最精密的相机，当我们眺望远方时，眼球转动的角度决定了能看到多大范围的风景。Three.js 里的透视相机（PerspectiveCamera）完美复刻了这一原理，它的第一个参数 "fov"（视野角度）就相当于我们眼球转动的最大幅度。
但这里有个反直觉的真相：视野角度并非直接决定可见范围的大小，而是通过正切函数间接发挥作用。想象你站在一条笔直的公路上，视野角度是你左右转头的最大角度，而正切函数计算的就是在某个距离上，你能看到的公路宽度 ------ 这个宽度才是真正决定画面内容的关键。
正切函数：三维世界的缩放魔法师
正切函数在直角三角形里的定义简单到可爱：对边长度除以邻边长度。当我们把相机看作直角三角形的一个锐角顶点时，这个锐角就是视野角度的一半（因为 fov 通常指垂直方向的总角度），邻边是相机到观察平面的距离，对边则是观察平面半高。
在 Three.js 的渲染流水线中，这段关系被悄悄转化为：观察平面高度 = 距离 × 正切 (视野角度 / 2) × 2。这行隐藏的公式，让相机像个精打细算的裁缝，总能根据你给出的 "角度" 和 "距离"，精准裁剪出合适大小的画布。
代码里的正切魔法秀
让我们用一段代码见证奇迹：
javascript
// 创建相机时，fov就像给正切函数递了把钥匙
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 假设我们想在距离相机10单位处放置一个平面
const distance = 10;
// 计算这个距离处的可见高度
const fovRadian = THREE.MathUtils.degToRad(camera.fov); // 角度转弧度
const visibleHeight = 2 * distance * Math.tan(fovRadian / 2);
// 创建一个刚好填满视野的平面
const planeGeometry = new THREE.PlaneGeometry(
visibleHeight * camera.aspect, // 宽度由高度和宽高比计算
visibleHeight
);这段代码生动展示了正切函数的妙用：当我们把平面放在 10 单位距离处时，用正切计算出的高度能让平面完美填满相机视野，不多一寸不少一分。就像给相机定制了一个刚好合身的画框。
实战陷阱：当正切函数调皮时
新手常犯的错误是盲目调整 fov 值而忽略正切函数的非线性特性。当视野角度从 60 度增加到 120 度时，可见范围的增幅远超两倍 ------ 因为正切函数在 0 到 90 度之间是个越来越 "兴奋" 的家伙，角度越大，它的值增长得越疯狂。
这就是为什么广角镜头（大 fov）会产生明显的透视畸变：近处物体被不成比例地放大，就像正切函数在近距离处的爆发式增长。Three.js 通过矩阵运算巧妙修正了这种畸变，但理解背后的正切原理，能让你在调参时少走很多弯路。
结语：数学是最美的渲染引擎
当你下次调整相机参数时，不妨在脑海里画个直角三角形：相机在顶点，视野角度是那个锐角，而正切函数正在默默计算着对边的长度。这个简单的几何关系，支撑起了 Three.js 中万千世界的视觉呈现。
就像魔法师从不轻易透露咒语，Three.js 也把复杂的数学运算藏在了引擎深处。但当我们理解了正切函数这个小小的 "魔法公式"，就能更自如地驾驭三维世界的光影，让每一个镜头都讲述出恰到好处的故事。