About the flop effect

[MarsTsaiCoding]

I want to do this. I have an idea to hide the card-to-mouse distance through the mask, but a lot of code needs to be written. Is there a more elegant and short way?

For example, there is a way to control the area Sprite3d euler y to flip

[ivanpopelyshev]

Is it in the same plane, two planes or do you want full-3d mesh?

[MarsTsaiCoding]

@ivanpopelyshev Which kind of code will be more streamlined?
I currently use Sprite3d to create a card, and the entire card can be flipped through skew, but like the GIF above, I don’t know how to proceed.
Can you give me some ideas? thank you

[ivanpopelyshev]

You need a Mesh, not sprite. Maybe SimpleMesh to make it simple. Also, you have to calculate the geometry yourself, pixijs does not have any instruments to get intersections of your lines or physics to drag this corner.

Regular pixijs stuff. Add projection plugin when you are ready :)

[ivanpopelyshev]

2 Meshes actually, each of 4 vertices.

[MarsTsaiCoding]

@ivanpopelyshev mash should be done, let me try and see thanks for your reply

[MarsTsaiCoding]

@ivanpopelyshev

now i code like this , I created four vertices, but how can I let him specify the size I want . Create a width * height number of vertices?
My idea is that mesh1 is the back of the card and mesh2 is the face card, to control mesh2 to display the back I want, but what should I do because if I use three vertices, the card will be deformed

[ivanpopelyshev]

you can just change meshv according to your slider.

As for transforms - well, position/scale/rotation still works if you need to position your card in center of screen and resize it. btw I usually use (0,0) in center.

[MarsTsaiCoding]

This is the result of adjusting vertices. How can I keep him from deforming? Through the indices parameter? If it is a bit troublesome, need to calculate vertices and know which indices to display