如何使相机适合对象 [英] How to Fit Camera to Object

问题描述

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

Using three.js I have the following.

• 包含多个Object3D实例的场景


• 几个预定义的摄像头Vector3位置


• 如果屏幕调整大小，画布的动态宽度/高度


• 用户可以选择一个对象（从上面）


• 用户可以选择相机位置（从上方）

• A scene containing several Object3D instances
• Several predefined camera Vector3 positions
• A dynamic width/height of the canvas if the screen resizes
• A user can select an object (from above)
• A user can select a camera position (from above)

给定正在查看的对象和他们选择的相机位置如何计算最终相机位置以最佳地适应屏幕上的物体？

Given an object being viewed and the camera position they have chosen how do I compute the final camera position to "best fit" the object on screen?

如果相机位置按原样使用在某些屏幕上，物体在我的视口边缘流血，而其他屏幕则显得较小。我相信可以将物体装到相机平截头体上但是找不到合适的东西。

If the camera positions are used "as is" on some screens the objects bleed over the edge of my viewport whilst others they appear smaller. I believe it is possible to fit the object to the camera frustum but haven't been able to find anything suitable.

推荐答案

我我假设您正在使用透视相机。

I am assuming you are using a perspective camera.

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

You can set the camera's position, field-of-view, or both.

以下计算对于作为立方体的对象是精确的，因此请根据对象的边界框进行思考，对齐以面向相机。

The following calculation is exact for an object that is a cube, so think in terms of the object's bounding box, aligned to face the camera.

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

If the camera is centered and viewing the cube head-on, define

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

和

height = height of the cube.

如果您将相机视野设置如下

If you set the camera field-of-view as follows

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

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

then the cube height will match the visible height.

此时，您可以稍微抬起相机，或者稍微增加视野。

At this point, you can back the camera up a bit, or increase the field-of-view a bit.

如果字段视图是固定的，然后使用上面的等式来求解距离。

If the field-of-view is fixed, then use the above equation to solve for the distance.

编辑：如果你想要cube width 匹配可见的 width ，让 aspect 成为画布的宽高比（画布宽度除以画布高度），并像这样设置相机视野

If you want the cube width to match the visible width, let aspect be the aspect ratio of the canvas ( canvas width divided by canvas height ), and set the camera field-of-view like so

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

three.js r.69

three.js r.69

这篇关于如何使相机适合对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！