Javascript 当scollt页面时，Three.js Raycaster被偏移

如果一个场景没有显示在整个页面上，您可以滚动，那么Raycaster将停止工作，并被您滚动的内容抵消

侧滚向下20像素，对象下方有20像素单击，以便对象光线投射器正确识别

我如何解决这个问题

非常感谢您的帮助

使用

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

威尔为你工作。 这是一个演示，滚动到底部单击立方体

身体{
字体系列：Monospace；
背景色：#fff；
边际：0px；
}
#帆布{
背景色：#000；
宽度：200px；
高度：200px；
边框：1px纯黑；
利润率：10px；
填充：0px；
顶部：10px；
左：100px；
}
.边界{
填充：10px；
利润率：10px；
高度：3000px；
溢出：滚动；
}
//Three.js ray.与偏移画布相交
var容器、摄影机、场景、渲染器、网格、，
对象=[]，
计数=0，
画布宽度=200，
帆布高度=200；
//信息
info=document.createElement（'div'）；
info.style.position='绝对'；
info.style.top='30px'；
info.style.width='100%'；
info.style.textAlign='center'；
info.style.color='#f00'；
info.style.backgroundColor='透明'；
info.style.zIndex='1'；
info.style.fontFamily='Monospace'；
info.innerHTML='INTERSECT Count:'+Count；
info.style.userSelect=“无”；
info.style.webkitUserSelect=“无”；
info.style.mozzuserselect=“无”；
document.body.appendChild（信息）；
container=document.getElementById（'canvas'）；
renderer=new THREE.WebGLRenderer（）；
设置大小（画布宽度、画布高度）；
container.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（45，画布宽度/画布高度，11000）；
摄像机位置y=250；
摄像机位置z=500；
摄像机。注视（场景。位置）；
场景。添加（摄影机）；
添加（新的3.AmbientLight（0x22222））；
var灯=新的三点灯（0xffffff，1）；
相机。添加（灯光）；
网格=新的三个。网格（
新的三盒几何结构（2002002002001,1,1），
新的三点网格材质（{color:0x0080ff}
) );
场景。添加（网格）；
对象。推送（网格）；
//寻找交叉点
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
//鼠标侦听器
document.addEventListener（'mousedown'，函数（事件）{
var rect=renderer.domeElement.getBoundingClientRect（）；
mouse.x=（（event.clientX-rect.left）/（rect.width-rect.left））*2-1；
mouse.y=-（（event.clientY-rect.top）/（rect.bottom-rect.top））*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（对象）；
如果（相交长度>0）{
info.innerHTML='INTERSECT Count:'+++Count；
}
}，假）；
函数render（）{
网格旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
}
（函数animate（）{
请求动画帧（动画）；
render（）；
})();

克里斯·洛夫的回答对我来说很有用，我只需要修好鼠标。x

mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;

---

这个问题很难理解，我可以猜出你的意思，但是提供一张图片或链接，或者得到帮助清理英语，这样我们就知道你的意思了。看到这个了吗