如何检测立方体的哪一侧被点击 [英] 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 );
}

在鼠标上制作光线投射器并检查与立方体或其面的交叉点

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

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