Vertex mismatch with raycaster and plane mesh

Questions
, ,
1

I am building a plane which reacts to mouse hover.
I was following a tutorial but the tutorial is very out of date and my code is bugging out.
Basically, When I hover a face, the actual hovered face doesn’t change rather some faces around the targeted face.

This is my animate function :

function animate(obj) {
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(pointer, camera);
    const intersects = raycaster.intersectObject(plane);

    if (intersects.length > 0) {
        intersects[0].object.geometry._bufferGeometry.attributes.color.setX(intersects[0].face.a, 0);
        intersects[0].object.geometry._bufferGeometry.attributes.color.setY(intersects[0].face.a, 0);
        intersects[0].object.geometry._bufferGeometry.attributes.color.setZ(intersects[0].face.a, 0);
        intersects[0].object.geometry._bufferGeometry.attributes.color.needsUpdate = true;
    }
}

I have been stuck on it for quite some time and I would really appreciate it if you could provide some advice on how to fix this issue.

2

Do you know this example?

ChangeColorOfFaceByClick

From the Collection of examples from discourse.threejs.org