# Can't update geometry.face.color

**URL:** <https://discourse.threejs.org/t/cant-update-geometry-face-color/2520>\
**Category:** Questions\
**Tags:** color, materials, geometry\
**Created:** [April 20, 2018, 4:06pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520 "2018-04-20T16:06:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![DMon](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@DMon](https://discourse.threejs.org/u/DMon)\
**Post date:** [April 20, 2018, 4:06pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/1 "2018-04-20T16:06:52Z")

</div>

Working on a project in Three.js, and the RGB values I get back don’t seem to correlate with the on screen graphics as they should.

I set a material like this:

`var planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, vertexColors: THREE.FaceColors });`

Apply it to a plane geometry, and then later change it with this:

`face.color.setHSL(0, 0, 0.0)`

Then repeatedly later change it with

`face.color.offsetHSL(0, 0, 0.1)`

The colors do in fact go from black to green, but then will not continue on and tend towards white. Looking at the RBG values, they then tell me that the color values are equal to:

`Color {b: 1, g: 1, r: 1}`

and using getHSL it says:

`{h: 0, s: 0, l: 1}`

Yet the plane is very clearly green, and not white. I’m obviously missing something big about how colors work here, but I cant for the life of me make heads or tails of this. Can anyone see what I’m doing wrong? Thanks inadvance.

---

<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:** [April 20, 2018, 8:29pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/3 "2018-04-20T20:29:45Z")

</div>

I’m unable to reproduce: [https://jsfiddle.net/f2Lommf5/5957/](https://jsfiddle.net/f2Lommf5/5957/)

In the demo the lightness (L component of HSL) of the material’s color is animated in the render loop. Everything looks as expected.

---

<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:** [April 20, 2018, 8:35pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/4 "2018-04-20T20:35:52Z")

</div>

Crossposting:

> <https://stackoverflow.com/questions/49944644/three-js-colors-rgb-not-correct>

---

<div class="post-metadata">

**Author:** ![DMon](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@DMon](https://discourse.threejs.org/u/DMon)\
**Post date:** [April 20, 2018, 9:25pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/5 "2018-04-20T21:25:11Z")

</div>

In your example you’re changing the color of the entire material, not the color of an individual face.

---

<div class="post-metadata">

**Author:** ![DMon](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@DMon](https://discourse.threejs.org/u/DMon)\
**Post date:** [April 20, 2018, 9:41pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/6 "2018-04-20T21:41:06Z")

</div>

I’ve edited your solution to show my problem: [https://jsfiddle.net/f2Lommf5/5972/](https://jsfiddle.net/f2Lommf5/5972/)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 21, 2018, 3:53am UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/7 "2018-04-21T03:53:15Z")

</div>

You need to set `geometry.elementsNeedUpdate = true` whenever you [update the faces](https://threejs.org/docs/#api/core/Geometry.faces).

[https://jsfiddle.net/f2Lommf5/5993/](https://jsfiddle.net/f2Lommf5/5993/)

---

<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:** [April 21, 2018, 8:23am UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/8 "2018-04-21T08:23:26Z")

</div>

> [@DMon](#):
>
> In your example you’re changing the color of the entire material, not the color of an individual face.

Sry, that was not clear to me. BTW: Setting `colorsNeedUpdate` to `true` is better since it causes less internal overhead than `elementsNeedUpdate`.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 21, 2018, 8:52am UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/9 "2018-04-21T08:52:26Z")

</div>

Reading the question I’m trying to realize, what the question is.  
Can’t you find the correlation between RGB and HSL color models?

---

<div class="post-metadata">

**Author:** ![DMon](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@DMon](https://discourse.threejs.org/u/DMon)\
**Post date:** [April 21, 2018, 2:39pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/10 "2018-04-21T14:39:47Z")

</div>

Yeah you can see in my fiddle I had that colorsNeedUpdate set to true, but forgot to re-comment it back in. What I should have posted is the same as your solution, but it doesnt fix my problem. you can see from the fiddle from @Mugen87 That it should be going Black -\> Green -\> White, but instead it only goes Black -\> Green, despite using the same code. THAT is my problem.

---

<div class="post-metadata">

**Author:** ![DMon](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@DMon](https://discourse.threejs.org/u/DMon)\
**Post date:** [April 21, 2018, 2:52pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/11 "2018-04-21T14:52:19Z")

</div>

Compare these two fiddles:  
[https://jsfiddle.net/f2Lommf5/6008/](https://jsfiddle.net/f2Lommf5/6008/) and  
[https://jsfiddle.net/f2Lommf5/5957/](https://jsfiddle.net/f2Lommf5/5957/)

The only difference is one is being applied to the material, and the other to a face of that material. I cant understand why One goes Black -\> Green -\> White, and the other only goes Black -\> Green. I’m basically just trying to control the complete brightness of a face, but I can only control the darkness it seems.  
I need to modify brightness on a face by face basis, without having to resort to removing all color.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 21, 2018, 2:58pm UTC](https://discourse.threejs.org/t/cant-update-geometry-face-color/2520/12 "2018-04-21T14:58:25Z")

</div>

It reminded me about one question from SO.  
That one:

> <https://stackoverflow.com/questions/27506997/superimposing-of-color/27737708#27737708>

  
Following WestLangley’s suggestion:  
[https://jsfiddle.net/prisoner849/f2Lommf5/6009/](https://jsfiddle.net/prisoner849/f2Lommf5/6009/)