在 window 调整大小时更新 three.js Raycaster

Update three.js Raycaster on window resize

我正在对 three.js 场景中的 select 对象使用光线投射器。所讨论的对象是地板形状的盒子几何体。

当我 select 一个对象时,正确的对象被 selected,但是当我随后调整 window 的大小时,光线投射器仍然在我改变之前对象最初所在的位置工作window 大小,所以我可以 select 一个对象但什么也没有发生,或者我可以 select 没有对象并且一个对象被 selected.

你如何更新这个?

调整大小时,您通常应该做两件事以便光线投射仍然有效:

  • 更新相机的投影矩阵
  • 确保使用新的 window 维度来计算鼠标坐标

两者都在下面的官方示例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;

}