将threejs透视相机转换为正交需要什么

Question

我有一些代码可以将透视相机转换为正交相机。问题是当我进行转换时，模型变得非常小而且很难看。

我已经根据距离和 FOV 计算了正交相机的缩放系数。我是否需要在正交相机上设置任何其他属性（例如剪切平面等）？

我相信立场保持不变。我不确定我还需要计算什么。

    fieldOfView = viewInfo.fov;
var getCameraPosition = function() {
    return viewer._viewport._implementation.getCamera()._nativeCamera.position;
};

// Calculate the delta position between the camera and the object
var getPositionDelta = function(position1, position2) {
    return {
        x: position1.x - position2.x,
        y: position1.y - position2.y,
        z: position1.z - position2.z
    }
};

var getDistance = function(positionDelta, cameraDirection) {
    return dot(positionDelta, cameraDirection);
};

distance = getDistance(positionDelta, cameraDirection),
var depth = distance;

var viewportWidth = view.getDomRef().getBoundingClientRect().width;
var viewportHeight = view.getDomRef().getBoundingClientRect().height;
var aspect = viewportWidth / viewportHeight;

var height_ortho = depth * 2 * Math.atan( fieldOfView * (Math.PI/180) / 2 )
var width_ortho  = height_ortho * aspect;

var near = viewInfo.near, far = viewInfo.far;
var newCamera = new THREE.OrthographicCamera(
    width_ortho  / -2, width_ortho   /  2,
    height_ortho /  2, height_ortho  / -2,
    near, far );


newCamera.position.copy( viewInfo.position );
var sCamera = new vk.threejs.OrthographicCamera(); //framework creatio of threejs cam

sCamera.setZoomFactor(orthoZoomFactor);
sCamera.setCameraRef(newCamera);
view.getViewport().setCamera(sCamera);

我还尝试为正交的透视设置相同的相机属性（例如剪裁平面等），但我仍然遇到同样的问题。

我想我缺少将对象放在与透视相机视图中相同的位置所需的一些属性或计算。

Answer 1

假设您有一个具有给定垂直视角fov_y（以度为单位）的透视图，并且您知道视口的大小width和 height. 此外，你有near和far面。这些是您用来设置的值THREE.PerspectiveCamera：

perspCamera = new THREE.PerspectiveCamera( fov_y, width / height, near, far );

此外，您知道物体的位置和相机的位置。一个物体不仅只有一个位置，而且您必须为其深度选择一个具有代表性的位置。

首先，您必须计算depth对象的 。

var v3_object = .... // THREE.Vector3 : positon of the object
var v3_camera = perspCamera.position;

var line_of_sight = new THREE.Vector3();
perspCamera.getWorldDirection( line_of_sight );

var v3_distance = v3_object.clone().sub( v3_camera );
depth = v3_distance.dot( line_of_sight );

然后您必须计算投影到视口的矩形的“大小” depth：

aspect = width / height;

height_ortho = depth * 2 * Math.atan( fov_y*(Math.PI/180) / 2 )
width_ortho  = height_ortho * aspect;

使用这些值THREE.OrthographicCamera可以像这样设置：

var orthoCamera = new THREE.OrthographicCamera(
    width_ortho  / -2, width_ortho   /  2,
    height_ortho /  2, height_ortho  / -2,
    near, far );
orthoCamera.position.copy( perspCamera.position ); 

透视相机的位置和方向可以像这样提交给正交相机：

orthoCamera.position.copy( perspCamera.position );
orthoCamera.quaternion.copy( perspCamera.quaternion ); 

另请参阅 stackoverflow 问题Three.js - 查找相机的当前 LookAt？