# Color side of the box on click

Hello everyone!
I made a playground that calculates the angle between north and normal vector of clicked mesh:

https://www.babylonjs-playground.com/#SF8809#4

when you click somewhere on red box or black sphere it’s gonna show you the angle in the middle at the top of the screen.

My question is if can color full plane of clicked mesh, photo below for better understanding. I tried to use decal(44-53) but it draws on full mesh I mean it covers also other planes of this box.

so the side of the box was clicked and it changed color to yellow:

edit:
https://www.babylonjs-playground.com/#SF8809#5
almost got it

You can try to create a separate mesh that will display the selected face (it does also work for the sphere):

https://www.babylonjs-playground.com/#SF8809#6

Note that a face is really a single triangle. The cube case is a special case where you have two triangles that are coplanar and thus you could display a quad, but it does not hold for the sphere case.

1 Like

I like your solution, that’s actually what I needed! But now comes more problems that I didn’t know will occur. Can we store information about what face was clicked and when we rotate the mesh with gizmo it’s gonna(yellow triangle) “rerender” in the correct position?
Hmm. I guess I could store info about normal vector but the point is when I rotate the gizmo I’d like to have info about the change of the plane’s normal vector.

So e.q when I click on the box (and init yellow triangle) it gives me calculated degrees. But when I rotate the mesh I have to click again on the plane to get calculations…

after rotation:

You can track a change in the box world matrix and update the selected face accordingly:

https://www.babylonjs-playground.com/#SF8809#7

Note that you will need to recompute the angle between north and the normal yourself in this case.

1 Like