【问题标题】:How to convert Orthographic camera to Perspective and back?如何将正交相机转换为透视并返回?
【发布时间】:2015-08-27 13:48:25
【问题描述】:

我正在使用 combinecamera.js 和 orbitcontrols.js https://github.com/mrdoob/three.js/blob/master/examples/js/cameras/CombinedCamera.js https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

我让它工作,以便可以切换相机,并且都可以放大和缩小。 但是,orbitcontrols 会重新定位透视相机以模拟缩放,而正交相机不会这样做(它会改变 fov 等)..

这最终导致相机远截头体平面在透视模式下移动(我想要这个),并且它在正交模式下不移动(我想要它移动)。

我已通过重新定位透视和正交相机来解决此问题。正交相机不使用其位置来确定缩放,因此存在问题。

问题是当我在相机之间切换时,它们的缩放量似乎不同。

我想问题是,我如何让正交相机依靠相机位置来确定变焦量,以便它看起来总是具有与透视相机相似的变焦?

【问题讨论】:

    标签: javascript camera three.js perspective orthographic


    【解决方案1】:

    好的,经过大量试验后,我找到了一种骇人听闻的方法来获得足够接近的结果。 我意外地发现,如果将远截头体值设置为 25,它将完美地工作.. 所以我做了一个等式来补偿值是否不同。它已经足够接近了,但也许有人可以看到它可以改进的地方?

    我换成了combinedcamera.js

    halfHeight /= this.zoom;
    halfWidth /= this.zoom;
    

    halfHeight /= ((this.cameraP.far/25)*this.zoom);
    halfWidth /= ((this.cameraP.far/25)*this.zoom);
    

    我在combinedcamera.js 中添加了这一行

    this.cameraO.far = this.cameraP.far+((this.cameraP.far/25)*this.zoom)-0.5;
    

    就在这之前

    this.cameraO.updateProjectionMatrix();
    

    这是完整的部分

     THREE.CombinedCamera.prototype.toOrthographic = function () {
    
    // Switches to the Orthographic camera estimating viewport from Perspective
    
    var fov = this.fov;
    var aspect = this.cameraP.aspect;
    var near = this.cameraP.near;
    var far = this.cameraP.far;
    
    // The size that we set is the mid plane of the viewing frustum
    
    var hyperfocus = ( near + far ) / 2;
    
    var halfHeight = Math.tan( fov * Math.PI / 180 / 2 ) * hyperfocus;
    var planeHeight = 2 * halfHeight;
    var planeWidth = planeHeight * aspect;
    var halfWidth = planeWidth / 2;
    
    halfHeight /= ((this.cameraP.far/25)*this.zoom);
    halfWidth /= ((this.cameraP.far/25)*this.zoom);
    
    this.cameraO.left = -halfWidth;
    this.cameraO.right = halfWidth;
    this.cameraO.top = halfHeight;
    this.cameraO.bottom = -halfHeight;
    
    // this.cameraO.left = -farHalfWidth;
    // this.cameraO.right = farHalfWidth;
    // this.cameraO.top = farHalfHeight;
    // this.cameraO.bottom = -farHalfHeight;
    
    // this.cameraO.left = this.left / this.zoom;
    // this.cameraO.right = this.right / this.zoom;
    // this.cameraO.top = this.top / this.zoom;
    // this.cameraO.bottom = this.bottom / this.zoom;
    
    this.cameraO.far = this.cameraP.far+((this.cameraP.far/25)*this.zoom)-0.5;
    this.cameraO.updateProjectionMatrix();
    
    this.near = this.cameraO.near;
    this.far = this.cameraO.far;
    this.projectionMatrix = this.cameraO.projectionMatrix;
    
    this.inPerspectiveMode = false;
    this.inOrthographicMode = true;
    
     };
    

    对于透视相机,我也将 this.zoom 更改为 1

     THREE.CombinedCamera.prototype.toPerspective = function () {
    
    // Switches to the Perspective Camera
    
    this.near = this.cameraP.near;
    this.far = this.cameraP.far;
    
    this.cameraP.fov =  this.fov / 1 ;
    
    this.cameraP.updateProjectionMatrix();
    
    this.projectionMatrix = this.cameraP.projectionMatrix;
    
    this.inPerspectiveMode = true;
    this.inOrthographicMode = false;
    
     };
    

    另外,我必须调整轨道控制

    this.dollyIn = function ( dollyScale ) {
    
        if ( dollyScale === undefined ) {
    
            dollyScale = getZoomScale();
    
        }
    
            scale /= dollyScale;
            scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom * dollyScale ) );
    };
    
    this.dollyOut = function ( dollyScale ) {
    
        if ( dollyScale === undefined ) {
    
            dollyScale = getZoomScale();
    
        }
    
            scale *= dollyScale;
            scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom / dollyScale ) );
    };
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-07-23
      • 1970-01-01
      • 2014-07-06
      • 2014-04-01
      • 2019-07-06
      • 2018-03-31
      • 2012-01-16
      • 1970-01-01
      相关资源
      最近更新 更多