如何使相机适合对象

Question

如何使相机适合对象

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

• 包含多个Object3D实例的场景

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

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

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

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

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

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

Answer 1

基于WestLangleys，这里的答案是如何使用固定的摄像机视野计算距离：dist = height / 2 / Math.tan(Math.PI * fov / 360);

Answer 2

要计算将相机放置到适合屏幕的对象的距离，您可以使用此公式（在Javascript中）：// Convert camera fov degrees to radiansvar fov = camera.fov * ( Math.PI / 180 ); // Calculate the camera distancevar distance = Math.abs( objectSize / Math.sin( fov / 2 ) );objectSize物体的高度或宽度在哪里。对于立方体/球体对象，您可以使用高度或宽度。对于长度或宽度较大的非立方体/非球体对象，请使用var objectSize = Math.max( width, height )以获得更大的值。请注意，如果您的物体位置不在0, 0, 0，则需要调整相机位置以包含偏移。这是一个CodePen，显示了这一点。相关部分：var fov = cameraFov * ( Math.PI / 180 );var objectSize = 0.6 + ( 0.5 * Math.sin( Date.now() * 0.001 ) );var cameraPosition = new THREE.Vector3(    0,    sphereMesh.position.y + Math.abs( objectSize / Math.sin( fov / 2 ) ),    0);您可以看到，如果您抓住窗口手柄并调整其大小，则球体仍占据屏幕高度的100％。此外，对象以正弦波方式（0.6 + ( 0.5 * Math.sin( Date.now() * 0.001 ) )）向上和向下缩放，以显示摄像机位置考虑对象的比例。