42

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?

3 Answers 3

81

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; 
3
  • 11
    is there also a way to limit horizontal rotation? Commented Mar 2, 2014 at 11:52
  • 3
    Yeh, see this answer
    – igneosaur
    Commented Oct 6, 2015 at 4:55
  • The zoom in/out mentioned here is for perspective camera only, for orthographic camera use this.minZoom = 0 and this.maxZoom = Infinity
    – Evertvdw
    Commented Jul 31, 2018 at 6:11
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;
3
  • 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
    Commented Feb 14, 2018 at 6:49
  • Can you create a codepen or jsfiddle? I'd be happy to help solve. @zwcloud
    – Radio
    Commented Feb 14, 2018 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
    Commented Dec 28, 2021 at 3:35
1

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);
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.