# How to Maintaining consistent viewport size when switching between perspective and orthographic cameras using orbitControls？

**URL:** <https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176>\
**Category:** Questions\
**Tags:** perspective-camera, orthographic-camera, camera\
**Created:** [May 30, 2024, 3:33am UTC](https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176 "2024-05-30T03:33:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joe\_Perry](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/joe_perry/32/41010_2.png) [@Joe\_Perry](https://discourse.threejs.org/u/Joe_Perry)\
**Post date:** [May 30, 2024, 3:33am UTC](https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176/1 "2024-05-30T03:33:35Z")

</div>

I have created a CodePen example using Three.js: [https://codepen.io/laddishx/pen/QWPemMB](https://codepen.io/laddishx/pen/QWPemMB)

In this example, I am switching between a perspective camera and an orthographic camera while using orbitControls. Currently, the change in perspective maintains the same viewing direction, but the distance from the current viewport to the target point is different.

PerspectiveCamera:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/9/798fc7a1ca800c18654bacefb14b6969b064961c.png)  
OrthographicCamera:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5a7d2fff6fa6f938352a728a66c01f6c68728271.png)  
After switching to OrthographicCamera,what I expect in OrthographicCamera:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/b/8b842bbc2229299464fc9de0881ced2d2b545723.png)

I know that in an orthographic camera, the viewport size is controlled by the zoom. However, how can I keep the viewport consistent with the perspective camera after switching?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 30, 2024, 7:26am UTC](https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176/2 "2024-05-30T07:26:16Z")

</div>

> [@Joe\_Perry](#):
>
> but the distance from the current viewport to the target point is different.

That’s a pretty wild claim 🤔 What’s observable is, that your object fills more screen space in one case, and less screen space in the other.

To get you started I suggest, you familiarize yourself with the concepts (similarities and differences) between true “Zooming”, which involves a **change in the cameras** focal length and (inherently) field of view ( **FOV** ), **while camera and object stay in place**!

Dollying, OTOH, involves **moving the camera** along a predefined path, for instance its “line of sight”, towards an object or away from it, **while maintaining its FOV.**

And then are of course combinations of the two. 🕶

Both can be used to make your contents “fill” you viewport to the same degree.

Three.js functions which may assist you are:

[Vector3.project()](https://threejs.org/docs/index.html?q=vector#api/en/math/Vector3.project)  
[Vector3.unproject()](https://threejs.org/docs/index.html?q=vector#api/en/math/Vector3.unproject)

Since your geometry most likely contains coordinates which are closer to the camera than others, you need to decide on a “reference” plane perpendicular to the camera’s line of sight, which you want to keep in place when switching between Orthographic ans Perspective Cameras back and forth.

---

<div class="post-metadata">

**Author:** ![Joe\_Perry](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/joe_perry/32/41010_2.png) [@Joe\_Perry](https://discourse.threejs.org/u/Joe_Perry)\
**Post date:** [May 30, 2024, 7:41am UTC](https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176/3 "2024-05-30T07:41:15Z")

</div>

> [@vielzutun.ch](#):
>
> That’s a pretty wild claim 🤔 What’s observable is, that your object fills more screen space in one case, and less screen space in the other.
> 
> To get you started I suggest, you familiarize yourself with the concepts (similarities and differences) between true “Zooming”, which involves a **change in the cameras** focal length and (inherently) field of view ( **FOV** ), **while camera and object stay in place**!
> 
> Dollying, OTOH, involves **moving the camera** along a predefined path, for instance its “line of sight”, towards an object or away from it, **while maintaining its FOV.**
> 
> And then are of course combinations of the two. 🕶
> 
> Both can be used to make your contents “fill” you viewport to the same degree.
> 
> Three.js functions which may assist you are:
> 
> [Vector3.project()](https://threejs.org/docs/index.html?q=vector#api/en/math/Vector3.project)  
> [Vector3.unproject()](https://threejs.org/docs/index.html?q=vector#api/en/math/Vector3.unproject)
> 
> Since your geometry most likely contains coordinates which are closer to the camera than others, you need to decide on a “reference” plane perpendicular to the camera’s line of sight, which you want to keep in place when switching between Orthographic ans Perspective Cameras back and forth.

I would like to express my acknowledgement of the lack of precision in my statement and my gratitude towards your assistance. I have found the solution I was looking for([Camera perspective \<-\> orthographic toggle in r3f and vanilla three.js · GitHub](https://gist.github.com/nickyvanurk/9ac33a6aff7dd7bd5cd5b8a20d4db0dc)), although I haven’t fully understood the underlying principles. Nonetheless, I am extremely grateful for your help. 💗

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [May 30, 2024, 10:14am UTC](https://discourse.threejs.org/t/how-to-maintaining-consistent-viewport-size-when-switching-between-perspective-and-orthographic-cameras-using-orbitcontrols/66176/4 "2024-05-30T10:14:51Z")

</div>

What principles are you not understanding?

It owns two cameras, the two types you want to switch between. Only one seems to be added to the controls, so perspective could be called “master”.

Each update tick, it decides which logic to call, be it ortho or perspective.

Now this is where it gets a little bit confusing. Ortho always seems to be in zoom 1 but they make the frustrum tight. It’s taking some measurement of the perspective frustrum at some distance. Basically it looks at how tall the camera “pyramid” is, at a distance where the controls target is. This looks weird by just looking at the code.

The controls probably change the frustrum of the perspective camera, and then the ortho code derives the ortho frustum from that. The size of the ortho camera could always be your window size, and zoom could be different.

Think of it as a box and a pyramid. Whenever you make the pyramid wider or narrower, the box adjusts to fit around it as tight as possible. The height of the pyramid is the distance between target and camera.

_edit_

It actually does change the the object the controls are controlling, but most of this still applies 🙂