# How to rotate mesh by aligning normal with axis?

**URL:** <https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389>\
**Category:** Questions\
**Tags:** quaternion\
**Created:** [August 25, 2022, 7:17pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389 "2022-08-25T19:17:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![brittany](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@brittany](https://forum.babylonjs.com/u/brittany)\
**Post date:** [August 25, 2022, 7:17pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/1 "2022-08-25T19:17:16Z")

</div>

I have a mesh that has been arbitrarily rotated. I would like to rotate it so that it is flat on the ground. My idea is to find the closest normal to the y-axis and then align that normal to the axis. I’m using a widely accepted answer on Stackoverflow as a basis: [math - Finding quaternion representing the rotation from one vector to another - Stack Overflow](https://stackoverflow.com/a/1171995)

However, I am getting a weird skewed result instead of the rotation that I would expect. After the rotation, I would expect the normal of the blue face to be (0, 1, 0) (aligned to the y-axis). If you comment out line 50, you can see what the box looks like before applying the quaternion.

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

Does anyone have experience with this? I’m afraid there is likely just something I don’t understand about quaternion rotations happening here.

---

<div class="post-metadata">

**Author:** ![brittany](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@brittany](https://forum.babylonjs.com/u/brittany)\
**Post date:** [August 25, 2022, 7:58pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/2 "2022-08-25T19:58:10Z")

</div>

Small update: normalizing the resulting quaternion fixes the weird skewing I was seeing, but still does not align the mesh like I’d expect.

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

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 25, 2022, 9:36pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/3 "2022-08-25T21:36:45Z")

</div>

This may be of use

> **[Target Axes Alignment | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/transforms/center_origin/target_align)**
>
> Learn about target axes alignment in Babylon.js.

---

<div class="post-metadata">

**Author:** ![brittany](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@brittany](https://forum.babylonjs.com/u/brittany)\
**Post date:** [August 26, 2022, 8:18pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/4 "2022-08-26T20:18:58Z")

</div>

Thanks! That did get me on the right track to conceptually understand what was happening. It turns out, I was also using the wrong method to do the actual quaternion rotation.

Solved here 🙂

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

---

<div class="post-metadata">

**Author:** ![lowclouds](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lowclouds/32/26590_2.png) [@lowclouds](https://forum.babylonjs.com/u/lowclouds)\
**Post date:** [August 27, 2022, 10:43pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/5 "2022-08-27T22:43:44Z")

</div>

I’ve made an alternate implementation using the method @JohnK referenced. I found the ‘normal’ you used odd, since it isn’t normal to Y - perhaps it’s just in the plane of the normal you want. I find the RotationFromAxis method easier to understand and use in my code, but that’s maybe just me.

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

---

<div class="post-metadata">

**Author:** ![brittany](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@brittany](https://forum.babylonjs.com/u/brittany)\
**Post date:** [August 29, 2022, 2:21pm UTC](https://forum.babylonjs.com/t/how-to-rotate-mesh-by-aligning-normal-with-axis/33389/6 "2022-08-29T14:21:52Z")

</div>

Thanks so much for the alternate implementation! I marked yours as solution because I do like the RotationFromAxis method a bit more. Thanks for the suggestion