2

I have a 4000px x 3000px image texture that I'm adding to a Mesh/Plane.

var img = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('myimage.png')
});

this.plane = new THREE.Mesh(new THREE.PlaneGeometry(4000, 3000, img);
this.scene.add(this.plane);

I'm also using OrbitControls to control this plane. I've limited the controls to only zoom in and out and pan for now. Very little rotation. As I zoom in and out (dollyIn/dollyOut), I'd like to get the bounding box of the viewable area of the plane. By viewable area, I mean what the user can visibly see of the image texture in the browser at the current state.

If I'm completely zoomed out, my bounding box should be = [[0,0],[4000,3000]]. If I'm zoomed in then my bounding box could be = [[100, 200], [400, 500]].

How can this be achieved in three.js?

WestLangley
  • 102,557
  • 10
  • 276
  • 276
wwwuser
  • 6,282
  • 8
  • 52
  • 64
  • 1
    Related: http://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object/ and http://stackoverflow.com/questions/13350875/three-js-width-of-view/. Also, `OrbitControls` controls the camera, not the plane. – WestLangley Oct 21 '13 at 00:17
  • How do I calculate the distance of the plane from the camera? Also, those might get the width and height, which helps get the second part of the bounding box, but how do I calculate the first part, the top left coordinates of the viewable area? – wwwuser Oct 21 '13 at 00:54
  • Looks like I need to create a Frustum to see what is inside the camera's field of view, but I'm unsure how to get the bounding box of the plane. Is there a way to do that? – wwwuser Oct 22 '13 at 03:34
  • 1
    `THREE.Box3.setFromObject( object )` and `THREE.Geometry.computeBoundingBox()`. – WestLangley Oct 22 '13 at 13:12
  • @wwwuser did you ever solve this? –  Apr 03 '21 at 10:16

0 Answers0