How to change cube face color on hover three.js?

Question

3D

I use raycaster to determine the face of the cube and then paint the face like this

const colorAttribute = intersected.object.geometry.getAttribute('color');
colorAttribute.setXYZ(face.a, color.r, color.g, color.b);
colorAttribute.setXYZ(face.b, color.r, color.g, color.b);
colorAttribute.setXYZ(face.c, color.r, color.g, color.b);
colorAttribute.needsUpdate = true;

But, as you can see, the edge is not completely painted over. Can anyone help? https://jsfiddle.net/kirill321592/fjdxpos1/43/javascript

_

Answer 1

It is necessary to make 2 triangles on the plane and paint them.
https://documentation.help/three.js-en/intro.htm