Jump to content

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


Recommended Posts

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


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?

Link to comment
Share on other sites

  • 2 weeks later...

Hiya @mangomongo, good to meet you.


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...