Three.js 计算填充屏幕所需的物距 [英] Three.js calculate object distance required to fill screen

问题描述

我看到了很多关于如何缩放相机以使物体充满屏幕的问题，但我正在尝试移动物体以充满屏幕.

I've seen lots of questions on how to zoom the camera so an object fills the screen, but I'm trying to move the object to fill the screen.

我一直在尝试使用原始照片像素大小的类似方法，并且这些对象已被缩放:

I've been trying something like this using the original photos pixel size, and these objects have been scaled:

    var dist = object.originalSize.height > $(window).height() 
            || object.originalSize.width  >  $(window).width()
            ? ( $(window).height() / object.originalSize.height ) * 100 
            : 10;

    var pLocal = new THREE.Vector3( 0, 0, -dist);
    var target = pLocal.applyMatrix4( camera.matrixWorld );
    var tweenMove = new TWEEN.Tween(object.position).to(target, 1500).easing(TWEEN.Easing.Cubic.InOut);

想出一个向量来移动对象，但是，我无法让对象填满屏幕.知道我需要计算一个对象需要多远才能填满屏幕的数学吗?

To come up with a vector to move the object to, however, I can't get the object to fill the screen. Any idea of the maths I need to calculate how far an object needs to be to fill the screen?

该对象是一个 Object3D，根据它的类型有不同的孩子.

The object is a Object3D with different children depending on it's type.

我知道原始照片的尺寸 (object.originalSize.height) 并且我知道已按比例放大以适合 2 的幂的几何图形.

I know the original photographs dimensions (object.originalSize.height) and I know the geometry that has been scaled up to fit with power of 2.

感谢收到有关如何计算距相机所需的距离以确保对象适合屏幕边界的任何线索.

Any clue gratefully received on how to calculate the distance required from the camera to ensure the object fits inside the bounds of the screen.

我也知道物品的边界框，即从 1024 到 128.

I also know the bounding box of the item, i.e. from 1024 to 128.

推荐答案

这有效，不知道为什么..

This works, not sure why..

    var vFOV = camera.fov * Math.PI / 180; 
    var ratio = 2 * Math.tan( vFOV / 2 );
    var screen = ratio * (window.innerWidth / window.innerHeight) ; 
    var size = getCompoundBoundingBox( object ).max.y;
    var dist = (size/screen) / 4; 

这篇关于Three.js 计算填充屏幕所需的物距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！