# Axes helper with different colors

**URL:** <https://discourse.threejs.org/t/axes-helper-with-different-colors/18132>\
**Category:** Questions\
**Tags:** helpers\
**Created:** [August 25, 2020, 8:53am UTC](https://discourse.threejs.org/t/axes-helper-with-different-colors/18132 "2020-08-25T08:53:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Uncoke\_cK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/uncoke_ck/32/12861_2.png) [@Uncoke\_cK](https://discourse.threejs.org/u/Uncoke_cK)\
**Post date:** [August 25, 2020, 8:53am UTC](https://discourse.threejs.org/t/axes-helper-with-different-colors/18132/1 "2020-08-25T08:53:02Z")

</div>

Is it possible to switch the axesHelper colors?

Many people uses the RGB having B as vertical.

I don’t know which is the standard: [GREEN](https://www.geeksforgeeks.org/computer-graphics-the-rgb-color-model/) or [BLUE](https://www.dummies.com/programming/google-sketchup/drawing-in-3d-on-a-2d-screen-with-sketchups-drawing-axes/)

To switch the color I have found this, but it doesn’t work:

```
    /* HELPERS */
  var axesHelper = new THREE.AxesHelper(5);
  var colorsAxes = colorsAxes.geometry.attributes.color;

 colorsAxe.setXYZ( 0, 1, 0, 0 ); // index, R, G, B
  colorsAxe.setXYZ( 1, 1, 0, 0 ); // red
  colorsAxe.setXYZ( 2, 0, 1, 0 );
  colorsAxe.setXYZ( 3, 0, 0, 1 ); // green -> blue
  colorsAxe.setXYZ( 4, 0, 0, 1 );
  colorsAxe.setXYZ( 5, 0, 1, 0 ); // blue -> green
  this.scene.add(axesHelper);
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 25, 2020, 9:07am UTC](https://discourse.threejs.org/t/axes-helper-with-different-colors/18132/2 "2020-08-25T09:07:47Z")

</div>

Try it like so: [https://jsfiddle.net/x9s2r4t1/1/](https://jsfiddle.net/x9s2r4t1/1/)

Notice that each axis is represented by a line segment which has a start and end point. Hence, two subsequent color values belong to a single axis. The color attributes needs to be configured like so if you want to switch green and blue:

```javascript
colors.setXYZ(0, 1, 0, 0);
colors.setXYZ(1, 1, 0, 0);
colors.setXYZ(2, 0, 0, 1);
colors.setXYZ(3, 0, 0, 1);
colors.setXYZ(4, 0, 1, 0);
colors.setXYZ(5, 0, 1, 0);

```

---

<div class="post-metadata">

**Author:** ![Uncoke\_cK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/uncoke_ck/32/12861_2.png) [@Uncoke\_cK](https://discourse.threejs.org/u/Uncoke_cK)\
**Post date:** [August 25, 2020, 9:13am UTC](https://discourse.threejs.org/t/axes-helper-with-different-colors/18132/3 "2020-08-25T09:13:20Z")

</div>

> [@Mugen87](#):
>
> ```javascript
> Try it like ...
> 
> ```

Thanks!! It works! May I buy you a beer??? 😃