Get color of Triangles of a mesh

I have a code for a button that checks if the color of the triangle is white it deletes them, the issue is that I got the triangles but don’t know how to check if the triangle has a specific color, but right now the function is deleting all the triangles there are in the scene. Here’s the code:

function deletetriangle() {
    if (mesh) {
        let colorAttr = mesh.geometry.getAttribute("color");
        let indexAttr = mesh.geometry.index;

        for (let i = 0; i < indexAttr.count; i++) {
            let r = colorAttr.array[i * 3];
            let g = colorAttr.array[i * 3 + 1];
            let b = colorAttr.array[i * 3 + 2];
            
            if (r === 255 && g === 255 && b === 255) {
                indexAttr.array = 0
            }
        }

        indexAttr.needsUpdate = true;
    }
}

This assignment isn’t valid. You should never change the array property of buffer attributes after their creation.

It is also not valid to resize buffers so I suggest you do the following:

  • When a triangle should be “deleted”, rearrange the index by putting the deleted triangles at the end of the index buffer.
  • Then use BufferGeometry.drawRange to define what parts of the geometry should be drawn.

Also I suggest you extract color values like so:

const r = colorAttr.getX( i );
const g = colorAttr.getY( i );
const b = colorAttr.getZ( i );

We do not recommend to read values directly from the array property since this approach breaks with interleaved data. So always use the getter/setter API of BufferAttribute when working with buffer data.

1 Like

Thanks for that, You are right indexAttr.array wasn’t right thats a typo. Still the issue is that I want to remove the triangles how am I supposed to do that?

This is solved. :smiley: