Color / Raycast Face Three js

RaycastFace.txt

var cube;

var scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(120,120,120)");
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var objects = [];

var geometry = new THREE.BoxGeometry(5, 5, 5);

var materials = [
  new THREE.MeshBasicMaterial( { color: new THREE.Color("rgb(120,0,0)"), vertexColors: THREE.VertexColors, side: THREE.DoubleSide } ),
 
  new THREE.MeshBasicMaterial( { color: new THREE.Color("rgb(0,120,0)"), transparent: true, opacity: 0.2 ,vertexColors: THREE.VertexColors, side: THREE.DoubleSide } )
]; // the two materials 
for (var i = 0; i < geometry.faces.length; i++) {
    geometry.faces[i].materialIndex = 0;
}
cube = new THREE.Mesh(geometry, materials); //tell three.js that you will have several materials in your geometry

scene.add( cube );
objects[0] = cube;
camera.position.z = 10;

console.log(cube)

var controls = new THREE.OrbitControls( camera );

document.addEventListener( 'mousemove', onDocumentMouseMove);

let mouse = new THREE.Vector2();

var animate = function () {
    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
};

animate();

function onDocumentMouseMove(e) 
{
	e.preventDefault();
    
    // let pointArr = [];
	
	mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    
    let raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
  
    let intersects = raycaster.intersectObjects(objects);
    
    if(intersects.length > 0){
        
        let close = [];
        for(let i = 0; i < intersects[0].object.geometry.vertices.length; i++){
            let dist = intersects[0].point.distanceTo(intersects[0].object.geometry.vertices[i]);
            let obj = {
                index: i,
                dist: dist
            }
            close.push(obj);
        }
        close.sort(n);

        let facesArr = [];
        for(let i = 0; i < intersects[0].object.geometry.faces.length; i++){
            let point = intersects[0].object.geometry.vertices[close[0].index];
            
            let a = intersects[0].object.geometry.faces[i].a;
            let b = intersects[0].object.geometry.faces[i].b;
            let c = intersects[0].object.geometry.faces[i].c;
            if(point.equals(intersects[0].object.geometry.vertices[a]) || point.equals(intersects[0].object.geometry.vertices[b]) || point.equals(intersects[0].object.geometry.vertices[c])){
                facesArr.push(i);
            }
        }
        
        let centroids = [];

        for(let i = 0; i < facesArr.length; i++){
            let a = intersects[0].object.geometry.faces[facesArr[i]].a;
            let b = intersects[0].object.geometry.faces[facesArr[i]].b;
            let c = intersects[0].object.geometry.faces[facesArr[i]].c;

            let vA = intersects[0].object.geometry.vertices[a];
            let vB = intersects[0].object.geometry.vertices[b];
            let vC = intersects[0].object.geometry.vertices[c];
        
            let meanX = (vA.x + vB.x + vC.x)/3;
            let meanY = (vA.y + vB.y + vC.y)/3;
            let meanZ = (vA.z + vB.z + vC.z)/3;

            let v = new THREE.Vector3(meanX, meanY, meanZ);

            let vObj = {
                index: facesArr[i],
                v: v
            }
            
            centroids.push(vObj);
        }


        let closeCentroids = [];
        for(let i = 0; i < centroids.length; i++){
            let dist = intersects[0].point.distanceTo(centroids[i].v);
            let obj = {
                index: i,
                dist: dist
            }
            closeCentroids.push(obj);
        }
        closeCentroids.sort(n);


        scene.remove(cube);

        // console.log(closeCentroids[0]);
        // //intersects[0].object.geometry.faces[centroids[closeCentroids[0].index].index].color.setHex( 0xffffff);
        // intersects[0].object.geometry.faces[centroids[closeCentroids[0].index].index].materialIndex = 1;
        // intersects[0].object.geometry.colorsNeedUpdate = true;

        var geometry = new THREE.BoxGeometry(5, 5, 5);

        var materials = [
            new THREE.MeshBasicMaterial( { color: new THREE.Color("rgb(120,0,0)"), vertexColors: THREE.VertexColors, side: THREE.DoubleSide  } ),
           
            new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.75, vertexColors: THREE.VertexColors, side: THREE.DoubleSide  } )
          ]; // the two materials 
        for (var i = 0; i < geometry.faces.length; i++) {
            if(i == centroids[closeCentroids[0].index].index){
                geometry.faces[i].materialIndex = 1;
            }else{
                geometry.faces[i].materialIndex = 0;
            }
            
        }
        cube = new THREE.Mesh(geometry, materials); //tell three.js that you will have several materials in your geometry

        scene.add( cube );

        // var dotGeometry = new THREE.Geometry();
        // dotGeometry.vertices.push(centroids[closeCentroids[0].index].v);
        // var dotMaterial = new THREE.PointsMaterial({
        // size: 10,
        // sizeAttenuation: false
        // });
        // var dot = new THREE.Points(dotGeometry, dotMaterial);
        // scene.add(dot);

    }
}

function n(a, b) {
    return a.dist - b.dist;
  }