Create card flipping illusion?

Questions
1

I’m creating a card game with ThreeJS. Initially the cards are face down in an X columns by Y rows table. When the user taps a card, I want to create the illusion of the card flipping around the Y axis to show the face of the card, just like it would appear to someone looking down at a card table watching the card(s) being flipped over, except in this case, the illusion will make the card look like it’s rotating on an invisible stick instead of being turned by a hand.

I’m guessing I need to simultaneously alter the Y angle orientation of the two images that will be colocated at the same (X, Y) location, where the current orientation of the image that is the back side of the card, and the current orientation of the image that is the face of the card are altered by a Javascript function operating in an interval. So I will change the angle around the Y axis for each image a certain increment each interval execution for both images.

Or should I create a cube with zero depth with one face of the cube the back side of the card and the opposing face the face card image, and just rotate the cube on the Y axis?

Is there a code sample that shows me how to do this? If not, what ThreeJS API calls should I study to achieve this?

1 Like
2

Hi! Welcome to the community! :wave:

Im not 100% sure I get what you mean, but I think what you need is to add a little “oomph” to the flipping animation, to sort of simulate a human hand flipping motion.
For that you could skew the rotation and/or add translation to the animation.
I’ve made a small demo to showcase how it can be done with THREE.CatmullRomCurve3 and custom keyframe tracks:

Codepen Demo

It still looks fairly robotic, but im sure with more time and trial & error you could get it to look just how you want it :smiley:
Creating and exporting animation from a 3D software like Blender is also a great possibility :+1:

8 Likes
3

Thanks DolphinIQ. I’m looking more for something that spins around the X axis like a shrimp on the BBQ. That animation you did is really slick though!

4

just wanted to say thanks, this codepen helped me get started on a little card game prototype.

i switched out the animation clips for tween.js cause i couldn’t figure out how to add easing interpolation to the curve point sampling

but, i may flip back to that in the long run

3 Likes