How do I put limits on OrbitControl?

Question

Is there a way to put limits on the OrbitControls.js? Imagine I'm creating something above the ground, I wouldn't like the camera to go below the ground, know what I mean?! The same things goes for zoom in and zoom out. Is there a way to set some variables to limit that because I don't want the camera getting to close or too far away?

score 79 · Accepted Answer · answered Apr 05 '13 at 06:22

79

OrbitControls source

Zoom in / zoom out

this.minDistance = 0;
this.maxDistance = Infinity;

Where to stop rotation :

this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians

Don't let to go below the ground

controls.maxPolarAngle = Math.PI/2;

answered Apr 05 '13 at 06:22

uhura

2,623
22
25

11

is there also a way to limit horizontal rotation? – Ivan Bacher Mar 02 '14 at 11:52
3

Yeh, see [this answer](http://stackoverflow.com/questions/25308943/limit-orbitcontrols-horizontal-rotation/25311658#25311658) – igneosaur Oct 06 '15 at 04:55
The zoom in/out mentioned here is for perspective camera only, for orthographic camera use `this.minZoom = 0` and `this.maxZoom = Infinity` – Evertvdw Jul 31 '18 at 06:11

score 2 · Answer 2 · answered Jul 26 '16 at 19:48

2

Just in case someone needs a a more robust answer with ground altitude and camera target adjustment:

You find the angle relative to the controls target and the ground position of the camera (regardless of altitude) and assign the maxPolarAngle. Adjust for your up axis, mine was Y. Inside the controls change event:

var centerPosition = controls.target.clone();
centerPosition.y = 0;
var groundPosition = camera.position.clone();
groundPosition.y = 0;
var d = (centerPosition.distanceTo(groundPosition));

var origin = new THREE.Vector2(controls.target.y,0);
var remote = new THREE.Vector2(0,d); // replace 0 with raycasted ground altitude
var angleRadians = Math.atan2(remote.y - origin.y, remote.x - origin.x);
controls.maxPolarAngle = angleRadians;

answered Jul 26 '16 at 19:48

Radio

2,810
1
21
43

It works but it will lock the control orbit(up and down) if you pan the orbit target below the ground altitude. And there is no way to move up the orbit target again. – zwcloud Feb 14 '18 at 06:49
Can you create a codepen or jsfiddle? I'd be happy to help solve. @zwcloud – Radio Feb 14 '18 at 12:24
@Radio You can use `controls.target.y = Math.max(controls.target.y, 0);` in the change event to restrict panning below the ground – Miro Dec 28 '21 at 03:35

score 1 · Answer 3 · edited Dec 16 '21 at 11:01

If you want more control over Orbit:

        const controls = new OrbitControls(camera, this.renderer.domElement);
        controls.enableDamping = true;   //damping 
        controls.dampingFactor = 0.25;   //damping inertia
        controls.enableZoom = true;      //Zooming
        controls.autoRotate = true;       // enable rotation
        controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
        controls.keys = {
          LEFT: 37, //left arrow
          UP: 38, // up arrow
          RIGHT: 39, // right arrow
          BOTTOM: 40 // down arrow
        };
    
       controls.addEventListener("change", () => {
          if (this.renderer) this.renderer.render(this.scene, camera);
        });

How do I put limits on OrbitControl?

3 Answers3

Linked