javascript - 如何检测立方体的哪一侧被单击

Question

现在，我正在尝试制作一个导航菜单，但要做到这一点，我需要检测用户单击了哪一侧。有没有办法通过光线转换来做到这一点，或者如果没有，还有其他方法吗？

如果您需要的话，这是我的代码: CodePen Link

简短版本在这里

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 );
}

在鼠标上创建光线转换器并检查与立方体或其面的相交