javascript - What is required to convert threejs perspective camera to orthographic - Stack Overflow

admin管理员组

文章数量:1394057

I have some code that converts a perspective camera to an orthographic camera. The problem is that when I make the conversion, the model bees 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.

I have some code that converts a perspective camera to an orthographic camera. The problem is that when I make the conversion, the model bees 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.

• javascript
• three.js
• camera
• perspective
• orthographic

Share Improve this question Follow edited Aug 18, 2021 at 4:33 David 57744 silver badges1616 bronze badges asked Feb 13, 2018 at 3:28 sarahsarah 15711 gold badge33 silver badges1111 bronze badges 3

• 1 Please don't deface or degrade your question. – Hovercraft Full Of Eels Commented Feb 14, 2018 at 0:23
• sorry, please check edit. wasn't intentional – sarah Commented Feb 14, 2018 at 0:28
• 1 Twice defaced = intentional. Moderators notified to lock this question and prevent further defacement. – Hovercraft Full Of Eels Commented Feb 14, 2018 at 1:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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 mitted 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?

本文标签： javascriptWhat is required to convert threejs perspective camera to orthographicStack Overflow