# Mesh rotation improper

**URL:** <https://forum.babylonjs.com/t/mesh-rotation-improper/8778>\
**Category:** Questions\
**Created:** [February 25, 2020, 11:26am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778 "2020-02-25T11:26:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arulraj\_22](https://avatars.discourse-cdn.com/v4/letter/a/9dc877/32.png) [@Arulraj\_22](https://forum.babylonjs.com/u/Arulraj_22)\
**Post date:** [February 25, 2020, 11:26am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/1 "2020-02-25T11:26:45Z")

</div>

Hi,  
I am trying to rotate the mesh in Babylon js.  
But the rotation is not proper in all the axis.

1. I want my cube mesh to be lit by the directional light on all the faces.
2. I don’t need the light to navigate with the default arc rotate camera. The light position should be always in a fixed position. Hence i opted for rotating the mesh alone.  
In the following PG, I am not able to rotate the mesh along X axis(for red & yellow face).  
[Babylon.js Playground](https://www.babylonjs-playground.com/#K4UGI8)

Need help.

---

<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:** [February 25, 2020, 1:06pm UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/2 "2020-02-25T13:06:45Z")

</div>

Hi @Arulraj_22 and welcome to the forum. The box is rotating as intended about its LOCAL Y axis. When you want to rotate about other axes then you need to use a [parent](https://doc.babylonjs.com/how_to/parenting) or a [pivot](https://doc.babylonjs.com/how_to/pivots).

Also you can use your angleX and angleY as already being in radians [https://www.babylonjs-playground.com/#K4UGI8#1](https://www.babylonjs-playground.com/#K4UGI8#1)

---

<div class="post-metadata">

**Author:** ![gopivell](https://avatars.discourse-cdn.com/v4/letter/g/a9adbd/32.png) [@gopivell](https://forum.babylonjs.com/u/gopivell)\
**Post date:** [February 26, 2020, 3:39am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/3 "2020-02-26T03:39:26Z")

</div>

Hi @JohnK ,  
In this sample, the red and yellow faces are not rotating along X axis. Instead of rotating, its spins.  
[www.babylonjs-playground.com/#K4UGI8](http://www.babylonjs-playground.com/#K4UGI8)

---

<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:** [February 26, 2020, 8:51am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/4 "2020-02-26T08:51:29Z")

</div>

Sorry but I am finding it very difficult to understand the issue.

In both this [https://www.babylonjs-playground.com/#K4UGI8#3](https://www.babylonjs-playground.com/#K4UGI8#3) and this [Babylon.js Playground](https://www.babylonjs-playground.com/#K4UGI8) when you move the cursor up and down the screen the box rotates around the X axis, when you move the cursor left and right the box rotates around the Y axis. Any movement that combines up and down with left and right will produce a rotation about both axes. This is what you would expect from the code.

---

<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:** [February 26, 2020, 9:48am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/5 "2020-02-26T09:48:05Z")

</div>

@Arulraj_22 and @gopivell after re-reading the question and some though I think I now know the problem. Though at the moment I do not have a solution as it is more difficult than the simple rotate about x and y as coded.

What I think is wanted is that for any movement of the cursor on screen the box should rotate in such a way that the view produced would be identical to the view produced by the arcRotateCamera for the same cursor movement.

If this is true then I suggest an edit of the title to

How to render the same view by rotating a mesh rather than the arcRotateCamera

---

<div class="post-metadata">

**Author:** ![Arulraj\_22](https://avatars.discourse-cdn.com/v4/letter/a/9dc877/32.png) [@Arulraj\_22](https://forum.babylonjs.com/u/Arulraj_22)\
**Post date:** [February 27, 2020, 5:33am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/6 "2020-02-27T05:33:02Z")

</div>

Yes, I want the mesh to move in the direction of cursor movement on screen.

But I feel even arc rotate camera does not rotate the cube in the cursor movement direction.  
You can see it in the following playground sample.  
[https://www.babylonjs-playground.com/##WRLP74](https://www.babylonjs-playground.com/##WRLP74)  
With arc rotate camera, the cube faces with gray and magenta color, horizontal movement of cursor does not rotate, instead it spins.

---

<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:** [February 27, 2020, 10:01am UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/7 "2020-02-27T10:01:40Z")

</div>

> [@Arulraj\_22](#):
>
> horizontal movement of cursor does not rotate, instead it spins.

Still do not understand what you expect to happen and for me a spin is a rotation.

The way the arcRotateCamera works is shown in [https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera](https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera) and it behaves as described.

Perhaps you expect the rotations to occur around the world axes when in fact they occur around their local axes in which case you need to use [rotate](https://doc.babylonjs.com/how_to/rotate#rotate) rather than rotation.

More explanations of how rotations work are in  
[https://doc.babylonjs.com/babylon101/position#rotation](https://doc.babylonjs.com/babylon101/position#rotation)  
[https://doc.babylonjs.com/babylon101/position#sequencing-rotations](https://doc.babylonjs.com/babylon101/position#sequencing-rotations)  
[https://doc.babylonjs.com/babylon101/position#rotationquaternions](https://doc.babylonjs.com/babylon101/position#rotationquaternions)  
[https://doc.babylonjs.com/resources/rotation\_conventions](https://doc.babylonjs.com/resources/rotation_conventions)  
[https://doc.babylonjs.com/how\_to/rotate](https://doc.babylonjs.com/how_to/rotate)

As you want a different approach it would be useful if you could give diagrams to explain how you would expect the box to rotate following left/right and up/down cursor movements.

The following pages might give you alternative approaches to viewing all aspects of the box

[https://doc.babylonjs.com/how\_to/gizmo](https://doc.babylonjs.com/how_to/gizmo)  
[https://doc.babylonjs.com/how\_to/meshbehavior](https://doc.babylonjs.com/how_to/meshbehavior)  
[https://doc.babylonjs.com/how\_to/customizing\_camera\_inputs](https://doc.babylonjs.com/how_to/customizing_camera_inputs)

---

<div class="post-metadata">

**Author:** ![Arulraj\_22](https://avatars.discourse-cdn.com/v4/letter/a/9dc877/32.png) [@Arulraj\_22](https://forum.babylonjs.com/u/Arulraj_22)\
**Post date:** [February 27, 2020, 12:30pm UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/8 "2020-02-27T12:30:05Z")

</div>

Finally found a way…  
[https://www.babylonjs-playground.com/#K4UGI8#8](https://www.babylonjs-playground.com/#K4UGI8#8)

---

<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:** [February 27, 2020, 12:39pm UTC](https://forum.babylonjs.com/t/mesh-rotation-improper/8778/9 "2020-02-27T12:39:43Z")

</div>

Well done 🙂

Just using WORLD parameter may give a smoother result [https://www.babylonjs-playground.com/#K4UGI8#9](https://www.babylonjs-playground.com/#K4UGI8#9)
