javascript - 如何在three.js中并行使用相机上的视图偏移和缩放属性
问题描述
我正在尝试使用 .js 编写一个three.js 场景PerspectiveCamera
。画布将显示整个相机视图的子区域,并且还将具有缩放系数。我已经仔细检查了我的偏移量是否正确并且缩放系数是否合理。
在完全垂直配合时,它们是
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 是针对全视图的,但应该针对子视图进行调整,或者我应该将缩放除以从子视图大小得出的某个因子,但我不确定从哪里开始。
解决方案
弄清楚了。
在我的更新功能中,我正在做
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)
推荐阅读
- microservices - 微服务的正确结构 - 基于订阅的模型
- kubernetes - uid:无法进行端口转发:使用 helm 找不到 socat
- python - producer.poll(0) 不会产生任何消息,但 producer.flush() 有效
- duplicates - 微服务之间的数据重复 - 解决 ONE 服务中的冗余
- php - PHP 文件中嵌入式 SQL 的 Notepad++ 语法高亮
- c# - 将基类转换为 T 的泛型类
- c# - 获取 MS Access 数据库上打开的连接数
- spring-boot - Springboot 2 RSocket 应用程序启动然后立即停止,没有错误消息
- mysql - mySQL LIMIT OFFSET 不适用于更新
- html - HTML 链接文本呈现不佳