Обновить three.js Raycaster при изменении размера окна

#javascript #three.js #raycasting

#javascript #three.js #raycasting

Вопрос:

Я использую заклинатель лучей для выбора объектов в моем three.js сцена. Рассматриваемые объекты представляют собой геометрию коробки в форме пола.

Когда я выбираю объект, выбирается нужный объект, однако, когда я затем изменяю размер окна, raycaster по-прежнему работает с того места, где изначально были объекты, прежде чем я изменил размер окна, поэтому я мог выбрать объект, и ничего не происходит, или я не мог выбрать объект, и объект будет выбран.

Как вы это обновляете?

Ответ №1:

При изменении размера вы обычно должны сделать две вещи, чтобы raycasting все еще работал:

  • Обновление матрицы проекции камеры
  • Убедитесь, что для вычисления координат мыши используются новые размеры окна

Оба выполняются в следующем официальном примере webgl_interactive_cubes. Соответствующие разделы кода:

 function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseMove( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2   1;

}