three.js - 如何对 OrbitControl 设置限制？

Question

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

Answer 1

OrbitControls 源

放大/缩小

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

在哪里停止旋转：

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

不要让去地下

controls.maxPolarAngle = Math.PI/2; 

Answer 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;

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