如何将正交相机转换为透视并返回?
How to convert Orthographic camera to Perspective and back?
我正在使用 combinedcamera.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 等)..
这最终导致相机远截锥平面在透视模式下移动(我想要这个),而在正交模式下它不移动(我想要它移动)。
我已经通过重新定位透视和正交相机来解决这个问题。正交相机不使用其位置来确定缩放,因此存在问题。
问题是当我在相机之间切换时,它们似乎没有相同的缩放量。
我想问题是,如何让正交相机依靠相机位置来确定缩放量,以便它看起来总是具有与透视相机相似的缩放?
好的,经过大量试验后,我找到了一种获得足够接近结果的 hackish 方法。
我无意中发现,如果 far frustum 值设置为 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 ) );
};
我正在使用 combinedcamera.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 等)..
这最终导致相机远截锥平面在透视模式下移动(我想要这个),而在正交模式下它不移动(我想要它移动)。
我已经通过重新定位透视和正交相机来解决这个问题。正交相机不使用其位置来确定缩放,因此存在问题。
问题是当我在相机之间切换时,它们似乎没有相同的缩放量。
我想问题是,如何让正交相机依靠相机位置来确定缩放量,以便它看起来总是具有与透视相机相似的缩放?
好的,经过大量试验后,我找到了一种获得足够接近结果的 hackish 方法。 我无意中发现,如果 far frustum 值设置为 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 ) );
};