javascript - 获取鼠标悬停在 Three.js 上的球体的 xyz

Question

我正在使用 Three.js 通过数组和 for 循环生成一堆球体。原始数组如下所示:

atoms = [
 ['Na', [0, 0, 0]],
 ['Na', [0.5, 0.5, 0]],
 ['Na', [0.5, 0, 0.5]],
 ['Na', [0, 0.5, 0.5]],
 ['Cl', [0.5, 0, 0]],
 ['Cl', [0, 0.5, 0]],
 ['Cl', [0, 0, 0.5]],
 ['Cl', [0.5, 0.5, 0.5]],
];

我解析数据，使 3 个数字代表 x、y、z 坐标。

最终产品由 Orbitcontrols.js 控制，如下所示:

我想知道的是我将如何做到这一点:将鼠标悬停在球体上(同时按下某个键以免干扰轨道控制)，然后单击鼠标返回我单击的球体的 xyz。

Answer 1

首先，您需要为 keydown、keyup 和 mousedown 事件添加一些事件监听器:

document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
document.addEventListener('mousedown', onMouseDown, false);

您可以在场景或某个类中添加这些事件监听器。对于 keyup 和 keydown，您需要查找要使用的 keyCode。

对于点击事件，您需要使用 THREE.Raycaster。您可以使用这样的东西作为开始:

function onMouseDown(event) {
    event.preventDefault();

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 1, 10000);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    for (var i=1; i<=16; i++) {
        var intersect = raycaster.intersectObject(spheres[i]);
        if (intersect.length > 0) {
            console.log(spheres[i].position);
            break;
        }
    }
}

如果您不使用全屏，则需要调整矢量。

希望这有帮助。