Change the color of the gizmo axes

Hi everybody,

First of all, I wish you a happy new year with full of BabylonJS code in your life and many other beautiful things.

I have a question, i want to change the colors of my gizmo mesh and i don’t know how to do it.
For instance, i’d want that the position Gizmo along the X Axis would be yellow.

I’ve made a PG if you want to help me between two glasses of champagne :wink:

Thanks for your help.


To customize the visual appearance of an existing gizmo, create a mesh on the same utility layer and then setCustomMesh on the gizmo.
I believe there are some hints how to do it in this PG -

Yes, it could be a way to solve my problem but i only want to change the colors, not create a whole mesh only to do that.

I’m looking for the place where the gizmo meshes are stored to find their materials but it does not work.

What is a little bit weird is that we can easily change the colors of the bounding box and bounding box gizmos but not the others.

You can do it by accessing gizmo.xGizmo._coloredMaterial (there are also the _hoverMaterial and _disableMaterial materials that you can change):

cc @Cedric, I don’t know if there are other ways. Maybe we should provide getters to access these properties(?)


Captain Caveman’s strikes again !!! :wink:

Thanks for your answer. And you’re right, maybe we should access theses properties on the same way as we can change the colors of the bounding box gizmo.

I’m all for it! Do you want to do the PR ? I’ll be happy to review it

Hi @Cedric

I’ve written an issue for you but i’m not able to write a PR, i’m not a typescript user.

Maybe once, i’ll find the time to help you more with my contributions but now, i’m a rookie…

Thanks anyway for all the help you provide daily to us.