three.js - 如何调整 three.js 透视相机的视野以适应球体？

Question

我有一个以我的相机为中心的球体，其半径和距离相机的距离是已知的。如何调整相机的视野 (FOV) 以使相机在任意视口(viewport)大小内完全适合球体？

Image of the angle I'm looking for

This answer类似，但我想调整 FOV 而不是相机的距离

Answer 1

为了调整 FOV 以适应球体，我需要使用反三角函数来计算从到球体的距离和球体上最远可见点形成的三角形的角度。

Image of the triangle that will give the correct angle

// to get the fov to fit the sphere into the camera
var vFOV = 2 * Math.asin(sphereRadius / distance);
// get the project's aspect ratio to calculate a horizontal fov
var aspect = this.width / this.height;
// more trig to calculate a horizontal fov, used to fit a sphere horizontally
var hFOV = 2 * Math.atan(Math.tan(vFOV / 2) / aspect);

这将以弧度给出答案。将 hFOV 或 vFOV 乘以度 fov * (180 / Math.PI)并申请 camera.fov .

我最初遇到了使用错误三角形的陷阱。如 this answer states
“球体被剪裁的原因与如果你站在一个大球体附近你看不到它的“北极”是一样的

不要这样做:
Image of the wrong triangle for a cropped view