3D ball map rotating in HTML5 canvas

Question

I have created a multiplayer pool game in HTML5 canvas and it is working just fine. I would like to enhance it with real ball rotations. Now I'm using simple png files for balls which cannot "rotate" in any direction (they can but it is not real). Is there any solution for rotating maps for each ball to emulate real ball rotations? I have drawn balls in 3D max, just don't know how to implement that. Should I render lot of ball rotations in all directions for each ball or there is another more simple way?

One of my thoughts was to create flattened maps for each ball dimensions 2*PI x PI (relative) which is actual spherical map for each ball, and to clip circle region for current ball position, but that would be still 2D projection, not 3D.

Answer 1

To fake it you could render the 3D animation of a rotation in a single direction. Like this:

Then calculate the direction vector and rotate the sprite based on the angle.