How to know which side of the cube is currently the front side

Questions
, , ,
1

currently I’m playing around this example. r3f-cannon-dice - CodeSandbox

all I want is when user click on dice or any other box which gone collapse with dice then after collapse simply show the front face number of both the dice like.

or

and I am wondering if it is possible to know which side of the cube is currently the front side, means: The side pointing to the camera. Until now I have no clue how to find that out.

2

If I remember correctly, you can simply use the onClick event from r3f, underneath the hood it’s a fancy raycaster and the event returns a faceIndex for the intersection between the ray and your mesh. Once you have the faceIndex you can figure out which face corresponds to which number. A bit easier for a cube than for a dodecahedron but it will work!

1 Like
3

thanks a lot for reviewing my comment but I’m still not getting well like, where should i have to use onClick event in this example it’s really helpfull if u guid me throughout this I’m not really familier with r3f

5

Ah, I’m sorry, I think I actually misunderstood your question. The onClick would tell you which face the user has clicked on but NOT which face the dice is facing after the roll. I’m actually not entirely sure how to solve your problem then. The thing that comes to mind is to track the mesh rotation and figure out which face is pointing up based on that but I don’t see an obvious way to figure out when cannon has stopped updating the state so, I’m not sure how to trigger such a check.

Maybe ask in the r3f discord in the cannon channel?

1 Like
6

each object has an orientation so with a bit of math (that i dont know) it’s probably not that hard. as in, if in world space without rotation, say, “1” is positive y and, say, “3” is negative y and so on than you just need to compare against world space orientation. you can extract the rotation axes from the matrix of the object.

imo this is less of a cannon or react thing and more of a plain math puzzle.

1 Like
7

Just a thought. Set a base vector, say [0, 1, 0] (up), in world coordinates, and get dot-product of normals of all sides (cast them in world coordinates, too). For which side the result will be 1, then this is the face that faces up.

2 Likes