如何在 three.js 中并行使用相机的视图偏移和缩放属性
How to use view offset and zoom properties on camera in three.js in parallel
我正在尝试用 PerspectiveCamera
编写 three.js 场景。 canvas 将显示整个相机视图的一个子区域,它也将有一个缩放因子。我已经仔细检查过我的偏移量是否正确并且缩放系数是否有意义。
在完全垂直贴合时,它们是
current zoom 1
x 714.4099378881989 y 0 w 3755.1801242236024 h 3888
当缩放为 1 时,偏移工作完美,但当缩放因子更改时,一切都消失了 rails。缩放 > 1 也可以按预期工作,没有视图偏移并以截锥体的中心为目标。我正在使用 TrackballControls
但它们不应该在这里发挥作用,因为我正在以编程方式设置所有值。
PerspectiveCamera
class中三个相关的相机更新函数是
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 是针对全视图的,但应该针对子视图进行调整,或者我应该将缩放比例除以从子视图大小得出的某个因子,但我不确定在哪里开始。
想通了。
在我的更新功能中我正在做
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)
我正在尝试用 PerspectiveCamera
编写 three.js 场景。 canvas 将显示整个相机视图的一个子区域,它也将有一个缩放因子。我已经仔细检查过我的偏移量是否正确并且缩放系数是否有意义。
在完全垂直贴合时,它们是
current zoom 1
x 714.4099378881989 y 0 w 3755.1801242236024 h 3888
当缩放为 1 时,偏移工作完美,但当缩放因子更改时,一切都消失了 rails。缩放 > 1 也可以按预期工作,没有视图偏移并以截锥体的中心为目标。我正在使用 TrackballControls
但它们不应该在这里发挥作用,因为我正在以编程方式设置所有值。
PerspectiveCamera
class中三个相关的相机更新函数是
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 是针对全视图的,但应该针对子视图进行调整,或者我应该将缩放比例除以从子视图大小得出的某个因子,但我不确定在哪里开始。
想通了。
在我的更新功能中我正在做
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)