Color side of the box on click

Questions
1

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:

image
image822×689 62 KB

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

2

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
3

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…

image
after rotation:
image

4

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
5

Thanks for the answers! With your help I’ll figure something out!