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:
the camera is parallel to the plane
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
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.
