How to change face color of a box dynamically?

https://www.babylonjs-playground.com/#0LF9CP#1

Say I want to add random colors (or material or any change in appearence) to a face whenever I click one of the faces…
Is there a way to access the faces individually? I can get their ID with the pickresult, but is there a way to edit them alone in any way?

Most straight forward way is to dispose of box and re-create a new one https://www.babylonjs-playground.com/#0LF9CP#3

Other way is to update the vertex colors for each box face. Remember each box face is made up of two triangular facets. Also make sure the box is updatable. This way you do not have to dispose of the box and create a new one each time https://www.babylonjs-playground.com/#0LF9CP#4

You can do something similar with textures and uvs.

Useful docs pages
https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
https://doc.babylonjs.com/how_to/updating_vertices

4 Likes

Hi guys. @issabln , you might want to consider making your box… from 6 separate planes. Then you could have active picking/actionManager on each plane… and each side of the box would have super-powers, then.

Here’s a 6-plane box-maker function/playground that SOMEBODY once created… for an old-forum user named “onit”. I activated non-ActionManager scene-based mesh-picking on all 6 planes. Click on any plane, to change its color.

https://www.babylonjs-playground.com/#TYAHX#123

A master-parent “gizmo” is in the box’s center. Activate line 14 to see it. shrug. This might be useful… depending upon your goals. Party on!

PS: There MAY BE a wiser and/or more professional way… using .subMesh instead of gizmo.slaves array. If the 6-plane box works OK for your project, we’ll try to improve it a bit, perhaps.

3 Likes