Using three js orthographic as 2D Camera

Questions
, , ,
1

Hei Community,
I tried to achieve the following situation but failed. Is there a better way:

I have a Scene with a Mesh that is rendered in one xy-Plane. I got an orthographic camera that shows the mesh as if it was a 2D Surface. This works fine.
I want to move the camera with the orbit-controls (or other controls if necessary).
The controls should have the following limiting constraints:
The camera axis shall always be orthogonal to the 2D-Mesh.
If the View of the camera is bigger then the mesh, there should be constraints that the mesh cannot overlap outside the view. If the Mesh is bigger then the view ( eg when zooming) The view of the camera should not overlap the mesh.

I’m shure there are 2D Renderers to achive this but I want to have full controls over 3D-Functionality for later effects.

Can anyone make an architertural suggestion?

What I was trying to do was limiting orbit controls. Orthogonality was working but I didn’t get the constraints of x and y coordinate shift to work when zooming.

Appreciate any help.

Regards Manuel

2

Yeah you have to divide by the cameras zoom level with the width/height of the orthocamera…
You can get the bounds of the mesh with
new THREE.Box3().setFromObject( theMesh );

3

Understood. This works for Zoom Factors that are just between 0.8 and 1.2 . Bit if I Zoom more in the cobstraints Sean to move. I guess this is because of azimut or polar angle. I Limited them to Zero and pi/2 . Is there a better Option to keep it all in a cartesian plane? Are there other Controls that fit better ?