javascript - PointerLockControlsを使用してThree.jsでマウスのヒット検出を行う方法は?

Question

オープンソース プロジェクトを作成しました。これは、Three.js を使用して 3D で書籍を表示するためのデータ ビジュアライザーです。( https://github.com/AlinCiocan/BooksIn3D )。そして今、キーを押した場合にユーザーが本の前にいるかどうかを検出したいと考えています。このようなもの：

たとえば、上の画像では、カーソルの手は本に当たっていません。

実際に関数を機能させるために最善を尽くしましたが、行き詰まっています。PointerLockControls を使用してヒット検出を行う方法について SO に質問があるかどうかを検索しましたが、何も見つかりませんでした。カーソルの手は動かず、常に画面の中央にあると言わざるを得ません。

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

    }
}