获取myz超过three.js的xyz

Question

我通过数组和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。

Answer 1

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

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

您可以在场景中或某些类中添加这些eventListeners。对于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;
        }
    }
}

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

希望这有帮助。