javascript - 将 Threejs 透视相机转换为正交相机需要什么

Question

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

我根据距离和视场计算了正交相机的变焦系数。我需要在正交相机上设置任何其他属性(例如裁剪平面等)吗？

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

    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);

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

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

Answer 1

假设您有一个具有给定垂直视野 Angular 透视图 fov_y (以度为单位)并且您知道视口(viewport)的大小 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 );

然后你必须计算投影到视口(viewport) 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 - Find the current LookAt of a camera?