如何对 OrbitControl 设置限制？

Posted 2023-02-22

【中文标题】如何对 OrbitControl 设置限制？

【英文标题】：How do I put limits on OrbitControl?

【发布时间】：2013-03-27 11:08:05

【问题描述】：

有没有办法限制OrbitControls.js？想象一下，我正在地面上创造一些东西，我不希望相机进入地面，知道我的意思吗？！放大和缩小也是如此。有没有办法设置一些变量来限制它，因为我不希望相机靠近或太远？

【参考方案1】：

OrbitControls source

放大/缩小

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

在哪里停止旋转：

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

不要让自己去地下

controls.maxPolarAngle = Math.PI/2; 

【讨论】：

还有办法限制水平旋转吗？

嗯，见this answer

这里提到的放大/缩小仅适用于透视相机，正交相机使用this.minZoom = 0和this.maxZoom = Infinity

【参考方案2】：

以防万一有人需要更可靠的地面高度和相机目标调整答案：

您可以找到相对于控件目标的角度和相机的地面位置（无论高度如何）并指定 maxPolarAngle。调整您的上轴，我的是 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;

【讨论】：

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

你能创建一个codepen或jsfiddle吗？我很乐意帮助解决。 @zwcloud

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

【参考方案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);
        );