0

I have a plane mesh with position px,py,pz, rotation rx,ry,rz and some fixed height and width. My camera is initially at 0,0,0 and with rotation 0,0,0. When I click the plane mesh, I would like to position the camera such that:

  1. the camera is parallel to the plane

  2. the entire plane mesh is in view

How could I achieve this using Three.js? I am using a PerspectiveCamera. I am thinking of trying to calculate based on the camera's FOV and the height/width of the plane, but am a bit stuck

Davey
  • 11
  • 2
  • Take a look at http://stackoverflow.com/questions/16462848/three-js-zoom-to-fit-width-of-objects-ignoring-height – gaitat May 30 '13 at 16:27

1 Answers1

0

In your case viewport is same thing as plane so calculation for FOV and aspect could be brute-force calculated.

Anyway, it doesn't make any sense to have perspective camera and plane that occupies whole view space. What I would do: make orthographic cam, render plane with orthographic cam and the rest of the scene with perspective cam.

Also, if you need cam and plane "connected" (to move and rotate sync) you should use parent-child property of the objects that Three.js provides, or manually set to use transformation matrix for plane also for cam.

Hope this helps.

Dragan Okanovic
  • 7,509
  • 3
  • 32
  • 48
  • Thank you for your help. In the end I changed by mind and decided I did not want the plane to fill the screen. I simply took the position vector of the plane mesh, multiplied it by a scalar value greater than 1 and moved the camera to that position, then used camera.lookAt to aim the camera. This seems to work well enough for me for now – Davey May 31 '13 at 14:53