javascript - 如何使用 PointerLockControls 在 Three.js 中进行鼠标点击检测？

Question

我做了一个开源项目。它是使用 Three.js 为您的 3D 书籍提供的数据可视化工具。（https://github.com/AlinCiocan/BooksIn3D）。现在我想检测用户是否在按一个键时在书前面。像这样的东西：

例如，在上图中，光标没有碰到任何书籍。

我尽我最大的努力让一个功能真正起作用，但我被卡住了。我搜索了关于如何使用 PointerLockControls 进行命中检测的任何问题，但我一无所获。我必须说我的光标手它没有移动，它总是在屏幕的中心。

function hitDetection(targets, callback) {
    var projector = new THREE.Projector();
    var raycaster = new THREE.Raycaster();

    var mouse = {};
    // it is always the center of the screen
    mouse.x = 0;
    mouse.y = 0;

    var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    var cameraDirection = controls.getDirection(vector).clone();
    projector.unprojectVector(cameraDirection,camera );

    var ray = new THREE.Raycaster(controls.getObject().position, cameraDirection.sub(controls.getObject().position).normalize());

    var intersects = ray.intersectObjects(targets);

    // if there is one (or more) intersections
    if (intersects.length > 0) {

        var hitObject = intersects[0].object;
        console.log("hit object: ", hitObject);
        callback(hitObject);

    }
}