# Calculate camera fov so that the camera view fits the object dimensions and canvas size

**URL:** <https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193>\
**Category:** Questions\
**Tags:** camera\
**Created:** [November 12, 2021, 3:45am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193 "2021-11-12T03:45:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Muhamad\_Rifky](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muhamad_rifky/32/7838_2.png) [@Muhamad\_Rifky](https://forum.babylonjs.com/u/Muhamad_Rifky)\
**Post date:** [November 12, 2021, 3:45am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/1 "2021-11-12T03:45:17Z")

</div>

Hi All

Is there a way to calculate the camera’s fov so that the camera view fits to object dimension and canvas size ?

I found a way to make the fov camera adjust to the size of the object in this forum:

> [@Calculate camera fov so that the camera view fits the object dimensions](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions/24980):
>
> Hi all, Is there a way to calculate the camera’s fov so that the camera view fits the size of the object? This is my PG: [Babylon.js Playground](https://playground.babylonjs.com/#Y82BS8) I made a sample code where I created a box and then I positioned the camera very close to the box, after that I set the camera’s fov value (set manually) so that all parts of the object can be seen. but I want the camera’s fov value to adjust based on the size of the box, until the box looks ideal (not too close and not too far)

But I want the fov camera to be able to adjust to the canvas size too. because my project requires that it can run on all devices

This is the PG: [https://playground.babylonjs.com/#Y82BS8#3](https://playground.babylonjs.com/#Y82BS8#3)

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [November 12, 2021, 5:50am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/2 "2021-11-12T05:50:49Z")

</div>

Hey there, one way to do this is to use an ArcRotateCamera, which has framing behavior available. 🙂 :  
[https://playground.babylonjs.com/#5T0H6Q#2](https://playground.babylonjs.com/#5T0H6Q#2)

Edit: IDK if you want it re-adjust on resizing or just once at the start, but if you want it on resizing it looks like @roland’s got you covered. 🙂 🍻

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 12, 2021, 6:01am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/3 "2021-11-12T06:01:16Z")

</div>

Hi! I’ve created this small PG, but @Blake was faster. 😛

[https://playground.babylonjs.com/#Y82BS8#5](https://playground.babylonjs.com/#Y82BS8#5)

---

<div class="post-metadata">

**Author:** ![Muhamad\_Rifky](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muhamad_rifky/32/7838_2.png) [@Muhamad\_Rifky](https://forum.babylonjs.com/u/Muhamad_Rifky)\
**Post date:** [November 12, 2021, 6:22am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/4 "2021-11-12T06:22:14Z")

</div>

but i need the fov value and i use free camera, for some reason i can’t use ArcRotateCamera camera

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 12, 2021, 6:26am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/5 "2021-11-12T06:26:18Z")

</div>

My PG shows how to use the world extends. Or you can use the boundigInfo of the mesh. Look at the API. You basically get the max and min values out of it. You can calculate the fov from these values accordingly.

---

<div class="post-metadata">

**Author:** ![Muhamad\_Rifky](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muhamad_rifky/32/7838_2.png) [@Muhamad\_Rifky](https://forum.babylonjs.com/u/Muhamad_Rifky)\
**Post date:** [November 12, 2021, 6:40am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/6 "2021-11-12T06:40:12Z")

</div>

could you give me some sample please ?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 12, 2021, 7:05am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/7 "2021-11-12T07:05:23Z")

</div>

You can change the size of the sphere and the `size` variable will change accordingly. You can use whatever mesh you want.  
[https://playground.babylonjs.com/#4F33I3#397](https://playground.babylonjs.com/#4F33I3#397)

Check the docs:

> **[Drawing Bounding Boxes | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/displayBoundingBoxes)**
>
> Learn how to draw bounding boxes in Babylon.js.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [November 12, 2021, 7:21am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/8 "2021-11-12T07:21:59Z")

</div>

Do you need more detailed help?

---

<div class="post-metadata">

**Author:** ![Muhamad\_Rifky](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muhamad_rifky/32/7838_2.png) [@Muhamad\_Rifky](https://forum.babylonjs.com/u/Muhamad_Rifky)\
**Post date:** [November 12, 2021, 7:57am UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/9 "2021-11-12T07:57:48Z")

</div>

thank @roland, i will try to implement it

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [December 10, 2021, 3:41pm UTC](https://forum.babylonjs.com/t/calculate-camera-fov-so-that-the-camera-view-fits-the-object-dimensions-and-canvas-size/25193/10 "2021-12-10T15:41:43Z")

</div>

Hi @Muhamad_Rifky just checking in, did you get the fov working like you wanted?
