如何检测单击多维数据集的哪一侧

时间:2018-05-16 00:36:08

标签: javascript 3d three.js

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

如果您需要,我的代码如下: 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
});

1 个答案:

答案 0 :(得分: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 );
}

在鼠标上做一个raycaster并检查多维数据集或其面部的交叉点