在 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;
}
我正在对 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;
}