pixijs / pixi-projection

MIT License
190 stars 34 forks source link

About the flop effect #77

Open MarsCaiWORD opened 4 years ago

MarsCaiWORD commented 4 years ago

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? 45648035f0bcf52af29c09bbe964ca58e8ad4d2e

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

ivanpopelyshev commented 4 years ago

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

MarsCaiWORD commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

2 Meshes actually, each of 4 vertices.

MarsCaiWORD commented 4 years ago

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

MarsCaiWORD commented 4 years ago

@ivanpopelyshev image 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 commented 4 years ago

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.

MarsCaiWORD commented 4 years ago

image 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