Rotate Mesh with Mouse does only half a rotation

Hey I have a simple Mesh and I want to rotate it which the mouse. Here is a playground: https://playground.babylonjs.com/#1EWIVF#6

The thing is the mesh will only rotate for 180° and will flip back after half of a rotation. Does somebody know WHY it will only rotate for 180°. Or is there a simpler way of rotating the mesh?

RotationFromAxis takes 3 orthogonal vectors but you pass it 2 zero vector. I think the behaviour is undefined with such parameters.

Maybe you can use the x/z components of the picked point to derive the angle:

https://playground.babylonjs.com/#1EWIVF#7

I already thought that my approach isn’t the right one. I like yours much more and it goes into the right direction. However, when the mesh has another x position the rotation will only work around the center.

https://playground.babylonjs.com/#1EWIVF#8

In this playground I made another x position and added a mesh in the center to visualize that the rotation only works around this part. I tried also to include the mesh position, and subtracted the current position with the pointer position but couldn’t make it work. Something like this: https://playground.babylonjs.com/#1EWIVF#9

You can use the startingPoint variable to offset the computations:

https://playground.babylonjs.com/#1EWIVF#10

1 Like

Ah thanks. That makes total sense!

Now I just need to add the current rotation so it won’t bounce when I start to rotate it, but I think that will be done quickly :slight_smile:
Thanks for your help

@Evgeni_Popov, maybe you can help. I played around with .addRotation on the Mesh itself and added a previousPoint variable to track the last (previousPoint) and the first position (startingPoint). This works just a little bit, as I added a threshold of 0.2. The thing is that I want to get rid of that if, so that I can rotate the Mesh without any significant “jumps” while starting with the move. I am not sure if I am on the right track.

https://playground.babylonjs.com/#1EWIVF#11

The problem is that depending on where you move the mouse you will get jumps or not. If you move it on the right after you first clicked, Math.atan2(1,0) = 90° and you will get a jump. Same thing if you move it left (but the angle is -90° instead). Only if you start moving up or down will you rotate smoothly because Math.atan2(0,1)=0°.

Have you considered using the rotation gizmo for this task, as it is specifically designed for this?

Alright that makes total sense, I think I have to make it a little different then.

Yes I already used the gizmo for that. The problem I have with the gizmo, is when zooming in or out it will not look like it is part of the mesh. It has a different zooming behavior, like with the GUI (but with the GUI it is nice though)

Maybe something like this would help:

It’s for the bounding box gizmo, I don’t know if the same option exists for the rotation gizmo.

Adding @Cedric who will know for sure!

1 Like

To get a gizmo with fixed world size, set updateScale to false and change the scaleRatio according to your world and mesh size.

Like in this PG:
scale gizmo | Babylon.js Playground

2 Likes

Wow. This is stunning! Thanks a lot for your effort. Seems like Babylon can handle everything just by its own.

1 Like