CODEWITHSUNDEEP
three.jscontrols
user1659565
user1659565

Reputation:

How do I put limits on OrbitControl?

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?

Upvotes: 43

Views: 31460

Answers (3)

uhura
uhura

Reputation: 2683

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;

Upvotes: 82

Hitesh Sahu
Hitesh Sahu

Reputation: 45062

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

Upvotes: 1

Radio
Radio

Reputation: 2853

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;

Upvotes: 2

Related Questions