Rotate sphere by mouse coordinates

Questions
1

Hi everyone,

This is my first BabylonJS project and I’m stuck on understanding rotations of a sphere. Also, this is my first 3D project ever so I can’t say I’m very good at this.

I’m working on a pool/snooker game developed in 2d with PixiJS (so there’s a fixed camera) and now I want 3D animated balls just like Miniclip’s 8 Ball Pool. Miniclip is using spritesheets to simulate 3D rotation.

I came to the conclusion that integrating BabylonJS will solve this request and it almost did excepting the balls rotations which will have to be solved manually, since the spheres will follow the 2D balls coordinates, X and Y (Z is fixed on zero). Just like here:

I found this tutorial and it works excellent in Unity, exactly what I needed, but it doesn’t work in my project.

I think the problem is where the quaternion needs to be multiplied with a vector, I’m not sure.
Also tried this with no result.

Can someone please help me with this?

I created something similar here, based on the mouse coordinates. The earth should rotate while the mouse is move, but of course it doesn’t.
https://www.babylonjs-playground.com/#0HCCW7#29

PS: I did search and investigated a lot of topics and solutions but none worked or maybe it’s beyond my capacity of understanding quaternions and math.

Later edit
Solved: https://www.babylonjs-playground.com/#0HCCW7#45

1 Like
2

I bet @JohnK and @jerome can help with the maths in here

3

not sure to get your goal, but you must at least assign the computed quaternion to the sphere rotationQuaternion property : https://www.babylonjs-playground.com/#0HCCW7#30

4

Thanks @jerome, I did add the quaternion, but as you can see some calculations are still missing and the sphere is moving like crazy.

5

https://www.babylonjs-playground.com/#0HCCW7#32

But instead use the clicked coordinates and current, like this:

https://www.babylonjs-playground.com/#0HCCW7#34

you could also use an animation to make the transition from the lastRotation to the newRotation smooth

(no quarternions though…)

6

You can convert Euler to Quaternion also after, or Quaterions to Euler

Quaternion -> Euler
mesh.rotationQuaternion.toEulerAngles();

Euler -> Quaternion

mesh.rotation.toQuaternion();

7

I’m certainly wrong with the cross product order, but something like this might be a quick way to do : https://www.babylonjs-playground.com/#0HCCW7#38

8

ooops I just realized that I also forgot to unproject the pointer x and y coordinates from the screen space to the view (camera) space before…

9

Hi again.

Thank you everyone for helping! Your ideas helped me on solving this issue. I switched the “mousemove” event with arrows keydown event for better control, but here it is:
https://www.babylonjs-playground.com/#0HCCW7#44

As @Dad72 said, I had to convert the sphere rotation to quaternion, multiply it and the final result converted into euler angles.

PS: I’ll get back to you with the “mousemove” project updated.

2 Likes