如何检测单击多维数据集的哪一侧 [英] How to detect what side of a cube is clicked

问题描述

现在，我正在尝试制作导航菜单，但为了做到这一点，我需要检测用户点击了哪一面。有没有办法用光线投射，或者如果没有，以任何其他方式？

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?

如果你需要它，这是我的代码：
CodePen链接

Here is my code if you need it: 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
});

推荐答案

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

在鼠标上做一个raycaster并检查与Cube或其面孔的交叉点

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

这篇关于如何检测单击多维数据集的哪一侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！