# How to move camera to contain plane?

**URL:** <https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291>\
**Category:** Questions\
**Tags:** camera\
**Created:** [October 17, 2019, 9:32am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291 "2019-10-17T09:32:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![troy351](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/troy351/32/6532_2.png) [@troy351](https://discourse.threejs.org/u/troy351)\
**Post date:** [October 17, 2019, 9:32am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/1 "2019-10-17T09:32:00Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/ddb5e6451d6a663328592a70d5417380efda1f7b.png)  
In the image above, I have a plane and a perspective camera.  
I want to move the camera along Y axis until it can exact see the full plane.  
how can I get the exact position Y value like this?  
`camera.position.y = magicFunction(plane.scale, camera.fov)`

FYI. the plane and camera are both centered at origin and camera face to the plane.

---

<div class="post-metadata">

**Author:** ![Yash\_Joshi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yash_joshi/32/6992_2.png) [@Yash\_Joshi](https://discourse.threejs.org/u/Yash_Joshi)\
**Post date:** [October 17, 2019, 11:30am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/2 "2019-10-17T11:30:45Z")

</div>

can you explain more about your requirements

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 17, 2019, 11:55am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/3 "2019-10-17T11:55:38Z")

</div>

You also need the aspect of the camera.

I assume the camera is rotated `0.5*Math.PI` around the X axis.

Try:

```auto
function magicFunction(planeScale, camera) {
    const vfov = camera.fov * Math.PI/180;
    const aspect = camera.aspect;
    const hfov = aspect*vfov; // Hm, not perfectly certain about this one right now.

    //Horizontal:
    //Solve 2*tan(0.5*hfov)*distance = planeScale.x for distance
    const hDist = planeScale.x/(2*Math.tan(0.5*hfov));

    //Vertical:
    const vDist = planeScale.z/(2*Math.tan(0.5*vfov));

    return Math.max(hDist, vDist);
}

```

---

<div class="post-metadata">

**Author:** ![troy351](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/troy351/32/6532_2.png) [@troy351](https://discourse.threejs.org/u/troy351)\
**Post date:** [October 17, 2019, 11:57am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/4 "2019-10-17T11:57:28Z")

</div>

There are lots of lines in the screen, and I need to focus the line which user clicked.  
The focus effect I need is move the camera to the center of the line, and look down the whole line.  
The problem is I don’t know the position y of camera that makes the whole line in sight.  
Sorry for my poor English

---

<div class="post-metadata">

**Author:** ![troy351](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/troy351/32/6532_2.png) [@troy351](https://discourse.threejs.org/u/troy351)\
**Post date:** [October 17, 2019, 12:00pm UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/5 "2019-10-17T12:00:24Z")

</div>

Yeah, as I sad, the camera is facing the plane which means your assumption was right.  
I’ll try that later, thanks

---

<div class="post-metadata">

**Author:** ![Nik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nik/32/52246_2.png) [@Nik](https://discourse.threejs.org/u/Nik)\
**Post date:** [October 17, 2019, 12:05pm UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/6 "2019-10-17T12:05:17Z")

</div>

If you know the FOV and the plane size. Then this is a trigonometry problem. Couldn’t you use the tan rule?  
Y distance = half plane width/tan(FOV\*0.5)

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 17, 2019, 1:32pm UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/7 "2019-10-17T13:32:39Z")

</div>

That is the principle behind my suggested solution. But it checks horizontally and vertically and returns the max.

---

<div class="post-metadata">

**Author:** ![troy351](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/troy351/32/6532_2.png) [@troy351](https://discourse.threejs.org/u/troy351)\
**Post date:** [October 18, 2019, 3:41am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/9 "2019-10-18T03:41:54Z")

</div>

I’ve tried and this is the final solution

```javascript
function magicFunction(planeScale, camera) {
    const fovTan = Math.tan(camera.fov * Math.PI / 180 / 2);

    //Horizontal:
    const hDist = planeScale.x / 2 / (fovTan * camera.aspect);

    //Vertical:
    const vDist = planeScale.z / 2 / fovTan;

    return Math.max(hDist, vDist);
}

```

FYI, `camera.aspect = Math.tan(0.5 * hfov) / Math.tan(0.5 * vfov)`  
Thanks anyway

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 18, 2019, 4:56am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/10 "2019-10-18T04:56:34Z")

</div>

Nice solution!

> [@EliasHasle](#):
>
> const hfov = aspect\*vfov; // Hm, not perfectly certain about this one right now.

> [@troy351](#):
>
> FYI, `camera.aspect = Math.tan(0.5 * hfov) / Math.tan(0.5 * vfov)`

Ah, sounds much more right. Thanks for that information! 😃

For completeness, reordering gives:

```javascript
hfov = 2*Math.atan(camera.aspect*Math.tan(0.5 * vfov))

```

---

<div class="post-metadata">

**Author:** ![troy351](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/troy351/32/6532_2.png) [@troy351](https://discourse.threejs.org/u/troy351)\
**Post date:** [October 18, 2019, 6:15am UTC](https://discourse.threejs.org/t/how-to-move-camera-to-contain-plane/10291/11 "2019-10-18T06:15:21Z")

</div>

yeah, but

```javascript
const hfov = 2 * Math.atan(foo)
const bar = Math.tan(0.5 * hfov)
// foo === bar

```

looks kinda stupid, so I simplified it