将threejs透视相机转换为正交需要什么 [英] What is required to convert threejs perspective camera to orthographic

问题描述

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

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

我相信这个位置保持不变.我不确定我还需要计算什么.

 fieldOfView = viewInfo.fov;var getCameraPosition = 函数(){返回viewer._viewport._implementation.getCamera()._nativeCamera.position;};//计算相机和物体之间的增量位置var getPositionDelta = 函数(位置 1，位置 2){返回 {x: 位置 1.x - 位置 2.x,y: 位置 1.y - 位置 2.y,z: 位置 1.z - 位置 2.z}};var getDistance = 函数(positionDelta，cameraDirection){返回点(positionDelta，cameraDirection)；};距离 = getDistance(positionDelta, cameraDirection),var 深度 = 距离；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 * 方面；var Near = viewInfo.near, far = viewInfo.far;var newCamera = new THREE.OrthographicCamera(width_ortho/-2, width_ortho/2,height_ortho/2, height_ortho/-2,近，远)；newCamera.position.copy(viewInfo.position);var sCamera = new vk.threejs.OrthographicCamera();//创建threejs cam框架sCamera.setZoomFactor(orthoZoomFactor);sCamera.setCameraRef(newCamera);view.getViewport().setCamera(sCamera);

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

我想我缺少将对象置于与透视相机视图中相同的位置所需的某些属性或计算.

解决方案

假设您有一个具有给定垂直视角 fov_y(以度为单位)的透视图，并且您知道视口 width 和 height.此外，您还有 near 和 far 平面.这些是用于设置

aspect = 宽/高；height_ortho = 深度 * 2 * Math.atan( fov_y*(Math.PI/180)/2 )width_ortho = height_ortho * 方面；

有了这些值，THREE.OrthographicCamera 可以设置如下:

var orthoCamera = new THREE.OrthographicCamera(width_ortho/-2, width_ortho/2,height_ortho/2, height_ortho/-2,近，远)；orthoCamera.position.copy( perspCamera.position );

<小时>

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

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

另见 stackoverflow 问题 Three.js - 查找当前相机的外观?

I have some code that converts a perspective camera to an orthographic camera. The problem is that when I make the conversion, the model becomes very tiny and hard to see.

I have calculated the zoom factor for the orthographic camera, based on the distance and the FOV. Are there any other properties that I need to set on the orthographic camera (e.g. clipping plane, etc..)?

I believe the position remains the same. I'm not sure what else I need to calculate.

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

I also tried setting the same camera properties (e.g. clipping planes etc) of the perspective for the orthographic and I still had the same problem.

I guess I am missing some property or calculation required to put the object in the same position as when it was in perspective camera view.

解决方案

Let's assume you have a perspective view with a given vertical field of view angle fov_y (in degrees) and you know the size of the viewport width and height. Furthermore, you have the near and far plane. These are the values which you use to setup the THREE.PerspectiveCamera:

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

Also, you know the position of the object and the position of the camera. An object doesn't have only a single position, but you have to choose a representative position for its depth.

First you have to calculate the depth of the object.

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

Then you have to calculate the "size" of the rectangle which is projected to the viewport at the depth:

aspect = width / height;

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

With these values the THREE.OrthographicCamera can be setup like this:

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

---

The positon and direction of the perspective camera can be committed to the orthographic camera like this:

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

See also stackoverflow question Three.js - Find the current LookAt of a camera?

这篇关于将threejs透视相机转换为正交需要什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！