0

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.

beek
  • 3,522
  • 8
  • 33
  • 86
  • I don't know what is `object.originalSize`, but I doubt you can define the original size of a 3d object in pixels. You should not try to compare things in different units ("3d world length unit" vs "pixel"), it's like saying 1.2 km is greater than 1 mile because _1.2 > 1_ – Volune Aug 31 '14 at 09:42
  • The original size and window height are both returned in pixels. So it's correct to compare them. If they are the right values to compare, that is a more appropriate question. The value of 10 is the z value for placing objects in front of the camera, so I figured that a scale to 100 would a apprpriate to getting the correct distance required. – beek Aug 31 '14 at 21:12
  • How have you configured your camera? – Volune Aug 31 '14 at 21:32
  • camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1024); – beek Aug 31 '14 at 21:45
  • What about the position of the camera and the position of the object? – Volune Aug 31 '14 at 21:54
  • So it starts off placed in the scene somewhere, and when its clicked tweens towards camera with var pLocal = new THREE.Vector3( 0, 0, -50); var target = pLocal.applyMatrix4( camera.matrixWorld ); \var tweenMove = new TWEEN.Tween(object.position).to(target, 1500).easing(TWEEN.Easing.Cubic.InOut); – beek Aug 31 '14 at 21:57
  • 1
    All of the equations you need are in [this answer](http://stackoverflow.com/questions/13350875/three-js-width-of-view/13351534#13351534). – WestLangley Aug 31 '14 at 23:30
  • Thanks that's helpful. I had seen this. My issue is that I know width, I'm trying to calculate distance required. I'll have another go at reversing the equation. – beek Aug 31 '14 at 23:35
  • it quite works. needs to append a '.start()' at the end of the tween though – Ben Dec 12 '14 at 07:24

1 Answers1

0

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;
beek
  • 3,522
  • 8
  • 33
  • 86