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?
Add a comment
|
3 Answers
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;
-
11
-
3
-
The zoom in/out mentioned here is for perspective camera only, for orthographic camera use
this.minZoom = 0
andthis.maxZoom = Infinity
– EvertvdwCommented Jul 31, 2018 at 6:11
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;
-
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.– zwcloudCommented Feb 14, 2018 at 6:49
-
Can you create a codepen or jsfiddle? I'd be happy to help solve. @zwcloud– RadioCommented 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– MiroCommented Dec 28, 2021 at 3:35
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);
});