I have a sphere/ball in three.js which I want to "roll" around on the x/z plane. For the z axis I could simply do this no matter what the current x and y rotation is:
sphere.roll_z = function(distance) {
sphere.position.z += distance;
sphere.rotation.x += distance > 0 ? 0.05 : -0.05;
}
But how can I roll it along the x axis? And how could I properly do the roll_z? I've found a lot about quaternion and matrices, but I can't figure out how to use them properly to achieve my (rather simple) goal.
I'm aware that I have to update multiple rotations and that I have to calculate how far to rotate the sphere to match the distance, but the "how" is the question. It's probably just lack of mathematical skills which I should train, but a working example/short explanation would help a lot to start with.
Here is an example of how the rotation goes wrong (WASD movement): http://js.blockheaven.net/simple.html