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屋！