How to properly rotate a sphere with up and down arrow keys?

[mangomongo]

I have a wire frame sphere with some markers on its surface:

http://www.babylonjs-playground.com/#Q3WWIK

You can use the left and right arrow keys to rotate around the y-axis. And you can use the up and down arrow keys to rotate around the x-axis.

When you rotate with the left and right arrow keys each marker always stays on a plane that is parallel to the bottom of the screen, no matter what the x-axis rotation is that you may have altered with the up and down arrows.

But when you rotate with the up and down arrow keys the markers don't always rotate on a plane that is parallel to the side of the screen. If you use the up and down arrow keys at the very beginning then it will work like I want it to. But if you use the left and right arrow keys a little bit and then rotate with up and down, the up and down rotation will then start to go sideways.

How can I always have the up and down arrow keys rotate the sphere like they do at the beginning of the scene? In other words how can I make it so that when using the up and down arrow keys, the markers on the sphere always rotate on a plane that is parallel to the side of the screen?

[Raggar]

http://www.babylonjs-playground.com/#Q3WWIK#1

You could rotate around the X-axis in World space?

The Y-axis rotation will still have to be in Local pace, though, otherwise you'll face the same issue.

What about the rotation, when you are facing the poles?

Oh, and if you rotate the sphere 180 degrees, the keys and the rotation will be reversed.

[mangomongo]

Hey thanks. It looks like you fixed it for the up and down arrow keys but now the left and right arrow keys have the issue.

Is it not possible to fix both at the same time?

[Wingnut]

Hiya @mangomongo, good to meet you.

http://www.babylonjs-playground.com/#Q3WWIK#2

Does that look better?  I simply used code lines that were similar to Raggar's line's 74 & 78... in lines 65 & 69.  I used Axis.Y instead-of Axis.X.

When using THIS kind of rotating... I'm quite sure we are utilizing ball.rotationQuaternion instead-of the Euler-based ball.rotation.

Thus... IF you DO need to GET the ball's rotation values, ball.rotation might not have anything useful stored there. 

Instead, you can use ball.rotationQuaternion.toEulerAngles() to get/read Euler values (vector3-type values) from the ball.

 

Also something to know:  .rotationQuaternion does NOT EXIST by default.  It is added to mesh... automatically, by the framework, when needed.

Look at this #4 version of your test playground, please.  Watch the JS console.  Early in your code- at line 14, I print ball.rotationQuaternion to console.  It says "undefined". 

Further down at line 62, after a "rotate" command (onKeyUp), I do it again.  NOW it has good numbers.  The framework added the ball.rotationQuaternion property... after it saw that you/Raggar/I were using ball.rotate(blah blah blah);  That is a Quaternion-based rotate command... so the framework added the the property FOR us.

The same automatic rotationQuaternion adding... happens when a mesh becomes physics-active, because 3rd-party physics engines such as OimoJS and CannonJS... LOVE using Quaternions.  Using Quaternions... avoids an issue called "gimbal lock", and this is why spacecraft use Quaternions, too. 

Quaternions have 4 values.  They are a bit difficult to understand for those who don't have a Quaternion gene in their DNA. 

Someone once described them to me as... 3 values to aim an arrow in some direction, and another value to set the amount of mesh rotation... around that arrow shaft.

Hope this helps.  Party on.