Can't update geometry.face.color

Questions
, ,
1

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.

3

I’m unable to reproduce: 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.

4

Crossposting:

5

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

6

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

7

You need to set geometry.elementsNeedUpdate = true whenever you update the faces.

https://jsfiddle.net/f2Lommf5/5993/

8

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

2 Likes
9

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

10

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.

11

Compare these two fiddles:
https://jsfiddle.net/f2Lommf5/6008/ and
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.

12

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


Following WestLangley’s suggestion:
https://jsfiddle.net/prisoner849/f2Lommf5/6009/

3 Likes