How to detect what side of a cube is clicked

Question

Right now, I am trying to make a navigational menu, but to do this, I need to detect what side is clicked by the user. Is there any way to do this with raycasting, or if not, any other way?

Here is my code if you need it: CodePen Link

The short version is here

var geometry = new THREE.BoxGeometry(200, 200, 200);
var material = new THREE.MeshLambertMaterial(
{
    color: 65535,
    morphTargets: true
});
for (var i = 0; i < 8; i++)
{
    var vertices = [];
    for (var v = 0; v < geometry.vertices.length; v++)
    {
        vertices.push(geometry.vertices[v].clone());
        if (v === i)
        {
            vertices[vertices.length - 1].x *= 2;
            vertices[vertices.length - 1].y *= 2;
            vertices[vertices.length - 1].z *= 2
        }
    }
    geometry.morphTargets.push(
    {
        name: "target" + i,
        vertices: vertices
    })
}
mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 0;
scene.add(mesh);
scene.background = new THREE.Color(15790320);
var params = {
    influence1: 1,
    influence2: 1,
    influence3: 1,
    influence4: 1,
    influence5: 1,
    influence6: 1,
    influence7: 1,
    influence8: 1
};
var geometry = new THREE.PlaneBufferGeometry(5e3, 5e3);
geometry.rotateX(-Math.PI / 2);
var material = new THREE.MeshBasicMaterial(
{
    color: 975132,
    overdraw: .5
});

Answer 1

  onMouseDown(event) {
    this.mouse.x = (event.pageX / window.innerWidth) * 2 - 1;
    this.mouse.y = -(event.pageY / window.innerHeight) * 2 + 1;
    this.raycaster.setFromCamera(this.mouse, this.camera);
    let intersectCube = this.raycaster.intersectObjects( Cube , true );
}

Make a raycaster on your mouse and check for intersections with the Cube or its faces