How to limit pan in OrbitControls for OrthographicCamera?

[Vornzy]

@EliasHasle

    var minPan = new THREE.Vector3( - 2, - 2, - 2 );
    var maxPan = new THREE.Vector3( 2, 2, 2 );
    var _v = new THREE.Vector3();
    
    controls.addEventListener("change", function() {
        _v.copy(controls.target);
        controls.target.clamp(minPan, maxPan);
        _v.sub(controls.target);
        camera.position.sub(_v);
    })

Elias thats fantastic work! well done!

[lansheng]

perfect solution

[Zach_Kobrinsky]

@EliasHasle

_v.copy(controls.target);
        controls.target.clamp(minPan, maxPan);
        _v.sub(controls.target);
        camera.position.sub(_v);

I’m trying to implement this, but I want my min and max to prevent a mesh from leaving the viewport. Any idea how to implement that? @Mugen87?

[Zach_Kobrinsky]

I’m trying to set the min max vectors to be the edges of the object, but it’s producing unexpected behavior.

[EliasHasle]

The idea is to project the vertices of the mesh to clip space (i.e. projected according to the camera position, orientation and projection) and calculate their bounding box there, and then move the camera far enough away that the mesh’s bounding box fits within the view.

In the general case, if you want a tight fit, you have to do this test dynamically, which (AFAIK from a couple years ago) three.js is not at all optimized for. If you need it to work with high performance for highly complex meshes, you can implement a spatial index and use that to prune off large numbers of unneeded tests. But another, perhaps more elegant, solution is to generate a (possibly much simplified) convex hull of the mesh and do the test on that instead.

You could just use the radius of the bounding sphere of the geometry, scaled according to the transform of the geometry, and the distance to and FOV of the camera, but chances are that you will be dissatisfied with the loose fit, if the mesh is long or flat or something.

[Zach_Kobrinsky]

Sorry, I don’t follow most of what you’re saying, I generally have a more high-level grasp of three.js. I did have some success previously using a bounding sphere, and yes, the results were pretty dissatisfying. In my mind, I feel like I should be able to dynamically set minPan and maxPan based on the dimensions of my bounding box, and it seems to work as long as the camera doesn’t rotate. So if I have minPan and maxPan sort of based on cartesian coordinates that keep my bounding box in the viewport that seems to work, but if the camera rotates, then x starts to become z, so on and so forth and it all falls apart.

So I feel like there must be a way to set min and maxPan while accounting for rotation?

[EliasHasle]

The bounding box is another crude approximation of the convex hull of the mesh, albeit not as crude as the bounding sphere. I think you run into problems with rotation because the bounding box is defined in the local space of the mesh and not in the view space of the camera. So if you can at least transform all corners of the bounding box to the right space, you may come closer to checking the right thing. This test can be done for every frame with no noticeable lag, but the tightness of the fit may then depend on rotation.

Then there are questions of correcting pan, camera distance, or both. And accounting for whether the camera has a perspective projection or an orthogonal projection.

It may be helpful if you can share a demo of what you have tried, as close as you can get. But anyway, I am not sure that I can set aside time to catch up with the newest version of three.js and help you out, but maybe someone else can.