3d - 在 Three.Js 中使物体完全适合相机视锥

Question

我试图让一个物体适合相机视锥体，为此我经历了所有的三角学，这是我使用的代码。

var setupCamera = function() {
    aspectRatio = window.innerWidth / window.innerHeight
    camera = new THREE.PerspectiveCamera( 45, aspectRatio, 1, 10000 );
    scene.add(camera);
}

var updateCamera = function() {
    var height = mesh1_BB.max.y;

    var width = mesh1_BB.max.x - mesh1_BB.min.x;
    var vertical_FOV = camera.fov * (Math.PI/ 180);

    var max_z = mesh1_BB.max.z;

    var horizontal_FOV = 2 * Math.atan (Math.tan (vertical_FOV/2) * aspectRatio);

    var distance_vertical = height / (2 * Math.tan(vertical_FOV/2));
    // alert ('vertical' + distance_vertical);
    var distance_horizontal = width / (2 * Math.tan(horizontal_FOV/2));
    // alert ('horizontal' + distance_horizontal);
    var z_distance = distance_vertical >= distance_horizontal? distance_vertical : distance_horizontal;

    camera.position.z = z_distance + max_z;
    camera.position.y = 0 ;
    camera.position.x = 0;
}

虽然我认为相机距离的计算是正确的，但这是我得到的结果:


我认为问题是改变了相机的 y 位置，并将其设置为 camera.position.y = height;但这就是我得到的:



我想要的结果如下(这是我通过用鼠标的右键单击按钮平移并向上拖动直到它适合整个 Canvas 框架而获得的结果):


我真的希望你能帮忙解决这个问题，因为这让我整天发疯;-)

非常感谢!

Answer 1

我没有检查你的距离计算，但是你直视 z 轴，而物体不是垂直以 0 为中心。把你的 camera.y在 mesh1_BB.max.y / 2应该解决这个问题。

如果您不想移动相机，请至少将其指向对象的实际中心。在这种情况下，使用(轴对齐)边界框不再是 100% 正确的。