How to highlight a cube face on hover? THREE.js

Questions
,
1

I am using raycaster to define the face of a 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 face is not completely painted over. Can someone help? https://jsfiddle.net/kirill321592/fjdxpos1/43/

2

A box geometry is indexed by default so highlighting individual faces via vertex colors does not work. You can easily fix this by converting the geometry to non-indexed via BufferGeometry.toNonIndexed().

Updated fiddle: https://jsfiddle.net/nkmqt3p2/

3

thanks for the comment, but now the painted face is divided into 2 even triangles, i would like the whole square edge to be covered. Do I need also to define a neighboring triangle somehow?

1 Like
4

Finally found out solution https://jsfiddle.net/zLt97pej/

1 Like