javascript - 如何使相机适合物体

Question

使用 three.js 我有以下内容。

• 包含多个 Object3D 实例的场景
• 几个预定义的相机 Vector3 位置
• 如果屏幕调整大小， Canvas 的动态宽度/高度
• 用户可以选择一个对象(从上方)
• 用户可以选择相机位置(从上方)

给定正在查看的对象和他们选择的相机位置，我如何计算最终相机位置以“最适合”屏幕上的对象？

如果在某些屏幕上“按原样”使用相机位置，则对象会溢出我的视口(viewport)边缘，而其他对象则显得较小。我相信可以将物体适合相机视锥体，但还没有找到合适的东西。

Answer 1

我假设您使用的是透视相机。

您可以设置相机的位置、视野或两者。

以下计算对于立方体对象是精确的，因此请考虑对象的边界框，对齐面向相机。

如果相机居中并正面观察立方体，定义

dist = distance from the camera to the _closest face_ of the cube

和

height = height of the cube.

如果按如下方式设置相机视野

fov = 2 * Math.atan( height / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

然后立方体高度将匹配可见高度。

此时，您可以将相机后退一点，或者稍微增加视野。

如果视野是固定的，则用上面的方程求解距离。

---

编辑:如果您希望立方体 width 匹配可见的 width，让 aspect 为 Canvas 的纵横比( Canvas 宽度除以 Canvas 高度)，然后像这样设置相机视野

fov = 2 * Math.atan( ( width / aspect ) / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

three.js r.69