# Change the color of the gizmo axes

**URL:** <https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027>\
**Category:** Questions\
**Created:** [January 1, 2023, 12:55pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027 "2023-01-01T12:55:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [January 1, 2023, 12:55pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/1 "2023-01-01T12:55:21Z")

</div>

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 😉

> **[Babylon.js Playground](https://playground.babylonjs.com/#31M2AP%23355)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Thanks for your help.

Boris

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [January 1, 2023, 2:00pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/2 "2023-01-01T14:00:43Z")

</div>

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 - [https://playground.babylonjs.com/#7KX2R8#133](https://playground.babylonjs.com/#7KX2R8#133)

---

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [January 1, 2023, 2:16pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/3 "2023-01-01T14:16:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 2, 2023, 11:54am UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/4 "2023-01-02T11:54:33Z")

</div>

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

> **[Babylon.js Playground](https://playground.babylonjs.com/#31M2AP%23357)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [January 2, 2023, 12:06pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/5 "2023-01-02T12:06:01Z")

</div>

Captain Caveman’s strikes again !!! 😉

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.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [January 3, 2023, 1:42pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/6 "2023-01-03T13:42:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [January 3, 2023, 3:38pm UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/7 "2023-01-03T15:38:52Z")

</div>

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.

Boris

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [January 4, 2023, 10:15am UTC](https://forum.babylonjs.com/t/change-the-color-of-the-gizmo-axes/37027/8 "2023-01-04T10:15:26Z")

</div>

> <https://github.com/BabylonJS/Babylon.js/pull/13402>
>
> fixes #13396 
> 
> \- Use TmpVector
> \- expose materials so user can tweak them
