# Create a box that exactly matches the bounding box after rotation

**URL:** <https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580>\
**Category:** Questions\
**Created:** [February 27, 2023, 5:13pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580 "2023-02-27T17:13:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 27, 2023, 5:13pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/1 "2023-02-27T17:13:13Z")

</div>

Hi. I would like to create a box every end of gizmo rotation. The box should exactly match the actual geometry bounding box after each rotation.

Here is the PG I created: [https://playground.babylonjs.com/#4F33I3#632](https://playground.babylonjs.com/#4F33I3#632)  
I wrote some code comments that didn’t work well, but maybe it might help to find a solution. Thank you for your attention

---

<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:** [February 27, 2023, 8:07pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/2 "2023-02-27T20:07:50Z")

</div>

You’re looking for an Object-Oriented Bounding Box (OBB) in opposite to the Axis-Aligned (AABB) Bounding Box that we calculate:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e9dc4f8eea31f522ea5f29b8ba271c7c530d7cb2.png)

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 27, 2023, 9:30pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/3 "2023-02-27T21:30:28Z")

</div>

The axis aligned bounding box is enough for me. Actually, I need to create a box mesh that matches the AABB of the other object, even if I rotate the object. I will use this box to do a simple csg and delete the box. The AABB already rotates perfectly according to my expectations but I cant make the box fit the bounding box of the merged mesh

---

<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:** [February 28, 2023, 12:43pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/4 "2023-02-28T12:43:11Z")

</div>

If you just need the AABB, then the bounding box of a Mesh: [BoundingBox | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/typedoc/classes/BABYLON.BoundingBox) should have all the information you need, and you can obtain it with `getBoundingInfo()`. One important detail is to ensure the world matrix is updated when you get it, by calling `computeWorldMatrix` with the `force` parameter set to true: [Bounding boxes | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#DRQFYI#1)

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 28, 2023, 4:46pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/5 "2023-02-28T16:46:17Z")

</div>

I could improve the code by hit and try since I am not sure which vector I am taking from the bounding info: [https://playground.babylonjs.com/#4F33I3#633](https://playground.babylonjs.com/#4F33I3#633)  
And also I have to get the right angle to rotate the box. I feel that what I did was not right. Could you check if the line 54 makes sense? I had to add a correction factor (1.1) BABYLON.Vector3.GetAngleBetweenVectors(merged.getBoundingInfo().boundingBox.vectorsWorld[0],new BABYLON.Vector3(1,0,0),BABYLON.Vector3.Cross(extend.boundingBox.vectorsWorld[0], new BABYLON.Vector3(1,0,0)));

---

<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:** [February 28, 2023, 7:19pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/6 "2023-02-28T19:19:28Z")

</div>

Have you tried using extendSizeWorld like my playground example?

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 28, 2023, 11:08pm UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/7 "2023-02-28T23:08:53Z")

</div>

I have tried the extendsizeWorld like in the first PG. If I use this vector, I have to get the components x y and z like the example you showed me. As I rotate, these components behave like a sinusoidal function. The box mesh would not fit the boundingbox after rotation

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [March 1, 2023, 2:37am UTC](https://forum.babylonjs.com/t/create-a-box-that-exactly-matches-the-bounding-box-after-rotation/38580/8 "2023-03-01T02:37:11Z")

</div>

I found a solution for the angle:  
var normalfacebounding = BABYLON.Vector3.Cross(merged.getBoundingInfo().boundingBox.vectorsWorld[2].subtract(merged.getBoundingInfo().boundingBox.vectorsWorld[1]),merged.getBoundingInfo().boundingBox.vectorsWorld[5].subtract(merged.getBoundingInfo().boundingBox.vectorsWorld[1])).normalize();  
if(normalfacebounding.z \<0){box.rotation.y= BABYLON.Vector3.GetAngleBetweenVectors(normalfacebounding,new BABYLON.Vector3(1,0,0),BABYLON.Vector3.Cross(normalfacebounding, new BABYLON.Vector3(1,0,0)).normalize());}  
else{box.rotation.y= -BABYLON.Vector3.GetAngleBetweenVectors(normalfacebounding,new BABYLON.Vector3(1,0,0),BABYLON.Vector3.Cross(normalfacebounding, new BABYLON.Vector3(1,0,0)).normalize());}

> **[Babylon.js Playground](https://playground.babylonjs.com/#4F33I3%23636)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

However, sometimes, when I drag the rotation gizmo fast, the box mesh gets out of the bounding box. Do you know why?