Strange behaviour SetColorAt with BatchedMesh

I was seeing something strange in my app when i switch to BatcheMesh. In the app you can select a mesh from a model and that selected one then changes the color.
When i then set the color back it is different from the original. Also it seems that the colors are not what you expect.

Fiddle to test this three.js dev template - module - JSFiddle - Code Playground

the batchedmesh is created green. then all the instances are changed to red (on screen not red) and the one that is changed back is green again.

it seems that the color value is not set but a Or statement is used??

Any thoughts on this.

Also it would be nice if you can also set the material on a instance (for using opacity on the selection)

regards

Eddy

Remove the color from the mesh material (or use white color). Most likely the color of the material is combined with the instance color. When the material color is white, the instance color shines:

const material = new THREE.MeshBasicMaterial( { wireframe:false } );

or

const material = new THREE.MeshBasicMaterial( { wireframe:false, color:'white' } );

3 Likes

Hmm but then you can’t have an initial color set ???
Some of my batchedmesh have 3000 instances, and then i must set them all on the initial color.
Seems a strange thing to do.

And this has the problem that when you want to use a material that has opacity it is not possible because you can only set the color.

I don’t use BatchMesh so I’m not familiar with how it manages colors. What I concluded is based on experiments with your code. If I were you and if I find no short solution, I’d set the colors of all instances with one-line for-loop.

BTW something similar happens with colors and textures. If a material has some color and a texture, the result is their multiplication – so if you want to see the true colors of a texture, the color of the material must be white.

1 Like

True, it works this way (channel-wise multiplication): three.js/src/renderers/shaders/ShaderChunk/color_vertex.glsl.js at 92e60c28b2a7aa0fd7024f09b74318017837ef2c · mrdoob/three.js · GitHub

2 Likes