【问题标题】:How do I put limits on OrbitControl?如何对 OrbitControl 设置限制?
【发布时间】:2013-03-27 11:08:05
【问题描述】:

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

【问题讨论】:

    标签: three.js controls


    【解决方案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 = 0this.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);
            });
    

    【讨论】:

      猜你喜欢
      • 2016-11-30
      • 1970-01-01
      • 1970-01-01
      • 2018-08-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-21
      • 2018-03-01
      相关资源
      最近更新 更多