如何使相机适合对象

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 radians

var fov = camera.fov * ( Math.PI / 180 ); 

// Calculate the camera distance

var 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 ) )）向上和向下缩放，以显示摄像机位置考虑对象的比例。