反应如何在光线投射器上更好地跟踪鼠标移动

Question

我有一个三js平面，它是在react的useEffect中创建的，它使用鼠标位置上的光线投射来产生效果，只要它占据整个屏幕，它就可以很好地工作，但如果我向下滚动一半，将鼠标放在屏幕中间，效果仍然发生在平面的一半，而不是鼠标所在的位置。因此，即使鼠标在平面的底部，在屏幕的中间，它也会突出显示屏幕的中间。

这就是我目前计算鼠标位置的方法

window.addEventListener('mousemove', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
})

我打电话给这里的光线播音员。

requestAnimationFrame(animate)
renderer.render(scene, camera)
raycaster.setFromCamera(mouse, camera)

Answer 1

我发现，通过获取边界矩形并减去它，可以将鼠标位置放在元素上，而不是屏幕本身

const section = document.getElementById("planeSection");
section.addEventListener("mousemove", (event) => {
var rect = container.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / window.innerWidth) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / window.innerHeight) * 2 + 1;
});