Mesh rotation improper

Questions
1

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

Need help.

2 Likes
2

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 or a pivot.

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

1 Like
3

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

4

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

In both this https://www.babylonjs-playground.com/#K4UGI8#3 and this Babylon.js Playground 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.

1 Like
5

@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

1 Like
6

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
With arc rotate camera, the cube faces with gray and magenta color, horizontal movement of cursor does not rotate, instead it spins.

7

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 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 rather than rotation.

More explanations of how rotations work are in
https://doc.babylonjs.com/babylon101/position#rotation
https://doc.babylonjs.com/babylon101/position#sequencing-rotations
https://doc.babylonjs.com/babylon101/position#rotationquaternions
https://doc.babylonjs.com/resources/rotation_conventions
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/meshbehavior
https://doc.babylonjs.com/how_to/customizing_camera_inputs

8

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

1 Like
9

Well done :slightly_smiling_face:

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

1 Like