Как выполнить обнаружение попадания мыши в Three.js используя PointerLockControls?

#javascript #three.js #pointerlock

#javascript #three.js #блокировка указателя

Вопрос:

Я создал проект с открытым исходным кодом. Это визуализатор данных для ваших книг в 3D с использованием Three.js . (https://github.com/AlinCiocan/BooksIn3D ). И теперь я хочу определить, находится ли пользователь перед книгой, если нажата клавиша. Что-то вроде этого:

введите описание изображения здесь

Например, на приведенном выше изображении курсор не попадает ни в одну книгу.

Я изо всех сил старался заставить функцию работать, но я застрял. Я искал, есть ли какие-либо вопросы по SO о том, как выполнить обнаружение попадания с помощью 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);

    }
}
  

Комментарии:

1. Попробуйте vector = new THREE.Vector3(); controls.getDirection( vec ); ray = new THREE.Raycaster(controls.getObject().position, vec ); .