如何在three.js中并行使用相机上的视图偏移和缩放属性答案

【问题标题】：How to use view offset and zoom properties on camera in three.js in parallel如何在three.js中并行使用相机上的视图偏移和缩放属性
【发布时间】：2020-03-11 00:50:37
【问题描述】：

我正在尝试使用PerspectiveCamera 编写一个three.js 场景。画布将显示整个相机视图的一个子区域，它还将具有缩放系数。我已经仔细检查了我的偏移量是否正确且缩放系数是否合理。

在完全垂直的情况下，它们是

current zoom 1 
x 714.4099378881989 y 0 w 3755.1801242236024 h 3888

当缩放为 1 时偏移效果很好，但是当缩放系数改变时，一切都偏离了轨道。缩放 > 1 也可以按预期工作，没有视图偏移并瞄准视锥体的中心。我正在使用TrackballControls，但它们不应该在这里发挥作用，因为我正在以编程方式设置所有值。

PerspectiveCamera类中的三个相关的相机更新函数

    updateProjectionMatrix: function () {

        var near = this.near,
            top = near * Math.tan( _Math.DEG2RAD * 0.5 * this.fov ) / this.zoom,
            height = 2 * top,
            width = this.aspect * height,
            left = - 0.5 * width,
            view = this.view;

        if ( this.view !== null && this.view.enabled ) {

            var fullWidth = view.fullWidth,
                fullHeight = view.fullHeight;

            left += view.offsetX * width / fullWidth;
            top -= view.offsetY * height / fullHeight;
            width *= view.width / fullWidth;
            height *= view.height / fullHeight;

        }

        var skew = this.filmOffset;
        if ( skew !== 0 ) left += near * skew / this.getFilmWidth();

        this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far );

        this.projectionMatrixInverse.getInverse( this.projectionMatrix );

    },

我最初的反应是 fov 是针对全视图的，但应该针对子视图进行调整，或者我应该将缩放除以从子视图大小得出的某个因子，但我不确定从哪里开始.

【问题讨论】：

标签： javascript three.js geometry trigonometry perspectivecamera

【解决方案1】：

想通了。

在我正在做的更新功能中

    this.zoom = zoom;

    this.setViewOffset(
      full.w,
      full.h,
      offset.x,
      offset.y,
      offset.w,
      offset.h
    );

    this.controls.update();

但我需要做的是改变缩放，使其相对于偏移量

this.zoom = zoom * (offset.h / full.h)

【讨论】：