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?

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

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.

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

回答1:

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;

来源：https://stackoverflow.com/questions/25589915/three-js-calculate-object-distance-required-to-fill-screen

标签

math

three.js