如何在OrbitControl上设置限制？

Question

有没有一种方法可以限制 OrbitControls.js？比如，假设我正在创建一个空中场景，我不希望相机移动到地面以下，明白我的意思吗？同样的情况也适用于缩放。是否有一种设置变量来限制相机距离的方法，因为我不想让相机过近或过远？

- user1659565

Answer 1

OrbitControls 源代码

放大 / 缩小

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

旋转停止位置：

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

不要让它掉到地下去

controls.maxPolarAngle = Math.PI/2; 

- uhura

---

有没有一种方法可以限制水平旋转？ - Ivan Bacher

好的，这是需要翻译的内容：Yeh, see this answer - igneosaur

此处提到的缩放只适用于透视相机，对于正交相机，请使用 this.minZoom = 0 和 this.maxZoom = Infinity。 - Evertvdw

Answer 2

如果有人需要更全面的答案，包括地面高度和相机目标调整：

您需要找到相机相对于控制目标和地面位置的角度（无论高度如何），并分配最大极角。根据您的上轴进行调整，我的是Y轴。在控件更改事件中：

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;

- Radio

---

它可以工作，但如果您将轨道目标平移到地面高度以下，则会锁定控制轨道（上下）。而且没有办法再将轨道目标向上移动。 - zwcloud

你能创建一个 CodePen 或 JSFiddle 吗？我很乐意帮忙解决。@zwcloud - Radio

@Radio 在 change 事件中，您可以使用 controls.target.y = Math.max(controls.target.y, 0); 来限制在地面以下的平移。 - Miro

Answer 3

如果您想更多地控制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);
        });

- Hitesh Sahu