CODEWITHSUNDEEP
angulartypescriptthree.js
horytnik
horytnik

Reputation: 65

Three JS mesh color change which has vertex colors

I have a problem with colors change in Three JS. I am adding meshes into my scene with vertex colors from stl files. The colors are added properly but when I try to change it via following code:

this.meshArray[elementName].material.color.setHex( colorValue );

The colors are not properly changed. They looks like mixture of old and new color. On the picture you can see the example. I was trying to change color of two parts to red. Gray part was changed to light red but blue one has changed to almost black. I have no idea what can be wrong with this but I assume that the problem is because i take colors from vertex colors and I don't change this setting later? Does someone know how to fix it?

enter image description here

Upvotes: 0

Views: 1309

Answers (1)

M -
M -

Reputation: 28482

You're encountering this issue because you're using vertexColors at the same time as the material.color property. Each vertex has its own individual color assigned, and when applying a general material color, they multiply together, giving you undesired results. For example, blue * red = black because 255 * 0 = 0

0x0000ff // blue
  ****** // multiply
0xff0000 // red
0x000000 // result

You're going to have to either change vertexColors or material.color but not both. To access the vertex colors in the geometry, you can use the geometry.getAttribute("color") method, and then change each RGB value for each vertex. See this working demo for an example of the vertexColors attribute in action.

Upvotes: 2

Related Questions