2

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

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。

4

1 回答 1

2

首先，您需要为 keydown、keyup 和 mousedown 事件添加一些 eventListener：

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

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

希望这可以帮助。

于 2013-07-02T21:50:26.950 回答